// background img
.background-bord{
    position: absolute;
    top: 46px;
    left: 0;
    width: 100%;
    height: 280px;
    background: url(../../public/static/images/main/main_background.png)no-repeat center;
    background-size: cover;
    z-index: 0;
}

// main-wrap
.main-contents{
    position: relative;
    z-index: 1;
    padding-bottom: 15px;
}

// contents
.store-id-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 33.5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.05);
    .store-id-title{
        position: relative;
        padding-left: 32px;
        font-size: 13px;
        color: #fff;
        &::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
            background-size: cover;
        }
    }
    .store-arr{
        display: block;
        width: 7px;
        height: 10px;
        background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
    }
    .store-id-name{
        font-size: 16px;
        color: #fff;
        font-weight: 600;
    }
}

// main-search-form
.main-search-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px 0;
    .search-raido-wrap{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-right: 30px;
    }
}
.search-input-box{
    display: flex;
    align-items: center;
    width: 580px;
    height: 45px;
    border-radius: 100px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(31, 31, 31, 0.30);
    .main-search{
        flex: 1;
        height: 100%;
        font-size: 13px;
        color: #fff;
        background-color: transparent;
        outline: none;
        border: none;
        font-family: 'Noto Sans JP', sans-serif;
    }
    .search-icon{
        width: 20px;
        height: 100%;
        background-image: url(../../public/static/images/main/main_search.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 21px 21px;
    }
}

// main-contents-inner
.main-product-list-wrap{
    max-width: 1400px;
    margin: 0 auto;
    .main-product-list{
        display: flex;
        gap: 24px;
        margin-bottom: 24px;
        .product-item{
            display: flex;
            flex-direction: column;
            padding: 40px;
            border-radius: 6px;
            background: #FFF;
            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
            &.item01{flex: 1; height: 400px;}
            &.item02{flex: none; width: 451px; height: 400px;}
            &.item03{flex: 1;}
            &.item04{flex: none; width: 351px;}
            &.item05{flex: none; width: 451px;}
            .product-item-title-wrap{
                display: flex;
                align-items: center;
                .product-item-title{
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    color: #101010;
                    font-weight: 600;
                    .item-logo{
                        display: block;
                        width: 40px;
                        height: 40px;
                        border-radius: 50px;
                        background: #14324F;
                        margin-right: 12px;
                        background-repeat: no-repeat;
                        background-size: 22px 22px;
                        background-position: center;
                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
                    }
                }
                .more-btn{
                    display: block;
                    width: 20px;
                    height: 20px;
                    margin-left: auto;
                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
                }
            }
            .product-item-content{
                margin-top: 30px;
                overflow: hidden;
                height: 100%;
                .recently-list{
                    .recently-item{
                        border: 1px solid #F2F2F2;
                        background-color: transparent;
                        padding: 29.9px 20px;
                        margin-bottom: 5px;
                        cursor: pointer;
                        .item-inner{
                            display: flex;
                            align-items: center;
                            span{
                                width: 0;
                                flex: 1;
                                position: relative;
                                display: block;
                                font-size: 13px;
                                color: #101010;
                                font-weight: 400;
                                padding: 0 10px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                &.time{
                                    flex: none;
                                    width: 160px;
                                    padding-left: 22px;
                                    &::before{
                                        content: '';
                                        position: absolute;
                                        top: 50%;
                                        left: 0;
                                        transform: translateY(-50%);
                                        width: 14px;
                                        height: 14px;
                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
                                        background-size: cover;
                                    }
                                }
                                &.product{
                                    flex: none;
                                    width: 160px;
                                }
                                &:after{
                                    content: '';
                                    position: absolute;
                                    top: 50%;
                                    right: 0;
                                    transform: translateY(-50%);
                                    width: 1px;
                                    height: 10px;
                                    background-color: #BBB;
                                }
                                &:last-child{
                                    &:after{
                                        display: none;
                                    }
                                }
                            }
                        }
                        &:last-child{
                            margin-bottom: 5px;
                        }
                    }
                }
                .recently-no-data{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    h3{
                        font-size: 16px;
                        color: #101010;
                        font-weight: 600;
                        margin-bottom: 5px;
                    }
                    p{
                        font-size: 12px;
                        color: #666;
                        font-weight: 400;
                        margin-bottom: 10px;
                    }
                }
                .notice-box{
                    height: 100%;
                    overflow-y: auto;
                    .notice-day{
                        font-size: 13px;
                        color: #666;
                        font-weight: 400;
                        margin-bottom: 7px;
                    }
                    .notice-title{
                        font-size: 14px;
                        color: #101010;
                        font-weight: 600;
                        margin-bottom: 25px;
                        line-height: 24px;
                        word-break: break-all;
                    }
                    .notice-contents{
                        font-size: 12px;
                        color: #666;
                        font-weight: 400;
                        line-height: 22px;
                        span{
                            position: relative;
                            display: block;
                            padding-left: 10px;
                            &::before{
                                content: '';
                                position: absolute;
                                top: 10px;
                                left: 3px;
                                width: 3px;
                                height: 3px;
                                border-radius: 100%;
                                background-color: #666;
                            }
                        }
                    }
                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
                }
                .faq-item{
                    position: relative;
                    margin-bottom: 10px;
                    .faq-item-inner{
                        display: flex;
                        align-items: center;
                        
                        .faq-num{
                            flex: none;
                            padding: 7px 12.5px;
                            font-size: 13px;
                            color: #101010;
                            font-weight: 600;
                            border-radius: 110px;
                            border: 1px solid rgba(242, 242, 242, 0.95);
                            margin-right: 20px;
                        }
                        .faq-title{
                            width: 0;
                            flex: 1 1 auto;
                            font-size: 13px;
                            color: #101010;
                            font-weight: 500;
                            padding-right: 96px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .faq-day{
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                            font-size: 13px;
                            color: #101010;
                            font-weight: 400;
                        }
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
                .data-download-wrap{
                    width: 100%;
                    .data-down{
                        display: block;
                        width: 100%;
                        padding: 20px;
                        text-align: left;
                        border-radius: 4px;
                        background-color: #697C8F;
                        margin-bottom: 5px;
                        transition: background .17s ease-in-out;
                        span{
                            position: relative;
                            display: block;
                            padding-right: 30px;
                            font-size: 13px;
                            color: #fff;
                            font-weight: 400;
                            &:after{
                                content: '';
                                position: absolute;
                                top: 50%;
                                right: 0;
                                transform: translateY(-50%);
                                width: 18px;
                                height: 16px;
                                background: url(../../public/static/images/main/download.svg)no-repeat center;
                                background-size: cover;
                            }
                        }
                        &:last-child{
                            margin-bottom: 0;
                        }
                        &:hover{
                            background-color: #859eb6;
                        }
                    }
                }
                .contact-info-list{
                    padding: 25px 30px;
                    border-radius: 4px;
                    background-color: #F4F4F7;
                    .info-item{
                        display: flex;
                        align-items: center;
                        padding: 15px 0;
                        border-bottom: 1px solid #fff;
                        &:first-child{padding-top: 0;}
                        &:last-child{padding-bottom: 0; border: none;}
                        .icon-box{
                            display: flex;
                            margin-right: 12px;
                        }
                        .infor-data{
                            font-size: 13px;
                            color: #101010;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
        &:last-child{
            margin-bottom: 0;
        }
    }
}

// loginpage
.login-wrap{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../../public/static/images/main/login_bg.png) no-repeat center;
    background-size: cover;
    .login-inner{
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        .login-logo{
            display: block;
            margin-bottom: 25px;
        }
        .login-input-frame{
            padding: 40px 50px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.97);
            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
            .login-frame-tit{
                font-size: 18px;
                color: #364864;
                font-weight: 400;
                padding-bottom: 30px;
                border-bottom: 1px solid #E5E9EF;
                span{
                    display: block;
                    font-weight: 600;
                    margin-bottom: 5px;
                }
                &.pw-reset{
                    font-size: 13px;
                }
            }
            .login-input-wrap{
                margin-top: 30px;
                .login-area{
                    position: relative;
                    display: flex;
                    align-items: center;
                    border: 1px solid #E5E9EF;
                    border-radius: 4px;
                    height: 45px;
                    padding-left: 40px;
                    padding-right: 15px;
                    margin-bottom: 15px;
                    transition: border .15s ease-in-out;
                    &.focus{
                        border-color: #A8B6C7;
                    }
                    .login-input{
                        flex: 1;
                        height: 100%;
                        background-color: transparent;
                        font-size: 13px;
                        font-weight: 400;
                        color: #6c819c;
                        &::placeholder{
                            font-size: 13px;
                            font-weight: 400;
                            color: #D1D7E0;
                        }
                    }
                    &::before{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 15px;
                        transform: translateY(-50%);
                        width: 10px;
                        height: 12px;
                        background-size: cover;
                    }
                    button{
                        width: 20px;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                    &.id{
                        &::before{
                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
                        }
                        .id-delete{
                            background-image: url(../../public/static/images/main/id_delete.svg);
                            background-size: 17px 17px;
                        }
                    }
                    &.email{
                        &::before{
                            background: url(../../public/static/images/main/login_email.svg)no-repeat center;
                            width: 12px;
                            height: 9px;
                        }
                        .id-delete{
                            background-image: url(../../public/static/images/main/id_delete.svg);
                            background-size: 17px 17px;
                        }
                    }
                    &.password{
                        margin-bottom: 20px;
                        &::before{
                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
                        }
                        .password-hidden{
                            background-image: url(../../public/static/images/main/password_hidden.svg);
                            background-size: 19px 13px;
                            &.visible{
                                background-image: url(../../public/static/images/main/password_visible.svg);
                            }
                        }
                    }
                }
                .login-btn{
                    display: block;
                    width: 100%;
                    height: 45px;
                    background-color: #5C6773;
                    color: #fff;
                    font-size: 15px;
                    font-weight: 600;
                    border-radius: 4px;
                    transition: background .15s ease-in-out;
                    &:hover{
                        background-color: #717e8d;
                    }
                    &.light{
                        background-color: #fff;
                        border: 1px solid #5C6773;
                        color: #5C6773;
                    }
                }
                .login-btn-box{
                    margin-bottom: 20px;
                }
                .pwreset-btn-box{
                    display: flex;
                }
                .reset-password{
                    width: 100%;
                    text-align: center;
                    button{ 
                        position: relative;
                        font-size: 13px;
                        color: #364864;
                        font-weight: 400;
                        padding-right: 16px;
                        &::before{
                            content: '';
                            position: absolute;
                            top: calc(50% + 1px);
                            right: 0;
                            transform: translateY(-50%);
                            width: 6px;
                            height: 8px;
                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
                        }
                    }
                }
            }
        }
        .login-guide-wrap{
            position: relative;
            margin-left: 10px;
            margin-top: 30px;
            padding-left: 15px;
            font-size: 13px;
            color: #fff;
            line-height: 24px;
            a{
                color: #fff;
                font-weight: 600;
                text-decoration: underline;
            }
            span{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    .login-copyright{
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #fff;
        font-weight: 500;
    }
}

.d-check-box{
    &.login{
        margin-bottom: 25px;
        label{
            padding-left: 20px;
            color: #364864;
            &:before{
                width: 22px;
                height: 22px;
                top: -1px;
                border-color: #A8B6C7;
                border-radius: 3px;
                transition: background .05s ease-in-out;
            }
        }
        input[type=checkbox]:checked + label::before{
            border-color: #A8B6C7;
            background-color: #A8B6C7;
        }
        input[type=checkbox]:checked + label::after{
            border-color: #fff;
            width: 7px;
            height: 11px;
            top: -2px;
            left: 1px;
        }
    }
}

// 회원가입
.center-page-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    background-color: #F4F4F7;
    overflow-x: hidden;
    .center-page-inner{
        width: 100%;
        max-width: 1760px;
        margin: 0 auto;
        padding: 10px 20px;
        .center-page-tit{
            font-size: 18px;
            font-weight: 600;
            color: #101010;
            margin-bottom: 24px;
        }
        .sub-table-box{
            &.signup{
                margin-bottom: 20px;
            }
        }
        .sign-up-btn-wrap{
            display: flex;
            justify-content: flex-end;
        }
        &.complete{
            max-width: 1000px;
        }
    }
    
}

// 회원가입 완료
.complete-box-wrap{
    padding: 72px 80px;
    .complete-tit{
        font-size: 18px;
        font-weight: 600;
        color: #101010;
        margin-bottom: 17px;
    }
    .complete-txt{
        font-size: 13px;
        font-weight: 400;
        color: #101010;
        margin-bottom: 27px;
    }
    .complete-email-wrap{
        padding: 36px 30px;
        border-radius: 2px;
        background: #F4F4F7;
        margin-bottom: 20px;
        .email-info{
            font-size: 13px;
            font-weight: 400;
            color: #000;
            span{
                color: #204AF4;
                font-weight: 500;
            }
        }
    }
    .complete-btn{
        display: flex;
        justify-content: flex-end;
    }
}