@charset "UTF-8";
@import 'utils.scss';
/*변수파일 import*/
.member{
    width:100%;
    padding-left:2rem;
    padding-right:2rem;
    @include desktopMax{
        width:120rem;
        padding-left:0rem;
        padding-right:0rem;
    }
    .pageTitle{
        h1{
            font-size: 2.8rem;
            font-weight: 600;
        @include tablet{
                font-size: 4.5rem;
            }
            @media (max-width: 768px) {
                font-size: 3rem;
                line-height: 3.6rem;
            }
            br{
                content: '';
                display: inline-block;
                width: 1rem;
            }
        }
        p{
            margin-top:2.4rem;
            font-size: 1.6rem;
            font-weight: 400;
            color: #676767;
        }
    }
    .carswBtn {
        margin-top: 5rem;
        .towButton {
            margin: 0 auto;
        }
    }
    .section1{
        margin-top:7rem;
        .memberComplet{
            border:1px solid #DEDEDE;
            border-radius: 0.6rem;
            padding:5rem;
            p{
                text-align: center;
                strong{
                    font-size:1.8rem;
                    font-weight: 600;
                    @include tablet{
                        font-size:2.4rem;
                    }
                }
                span{
                    display: block;
                    font-size:1.4rem;
                    font-weight: 400;
                    margin-top:1rem;
                    line-height: 2.2rem;
                    @include tablet{
                        font-size:1.6rem;
                        line-height: 2.4rem;
                        margin-top:2rem;
                    }
                }
            }
        }
        
    }
    .section2{
        margin-top:5rem;
    }
    .section3{
        margin-top:7rem;
        h2+p{
            margin-top:2rem;
            margin-bottom:2.5rem;
            font-size: 1.4rem;
            line-height:2.2rem;
            @include tablet{
                font-size: 1.6rem;
                line-height:2.4rem;
                margin-bottom:3rem;
            }
        }

    }
    .section1,
    .section2,
    .section3{
        .editorBox{
            width:100%;
            margin-top:2rem;
            min-height:20rem;
            overflow-y:scroll;
            bordeR:1px solid #DEDEDE;
            border-radius: 0.6rem;
            padding:2rem;
        }
        h2{
            font-size:1.8rem; 
            font-weight: 600;
            @include tablet{
                 font-size:2.4rem; 
            } 
        }
        label{
            margin-top:1.5rem;
            displaY:flex;
            align-items: center;
            @include tablet{
                margin-top:2rem;
            }
            input{
                min-width:2rem;
            }
            span{
                margin-left:1rem;
                font-size: 1.4rem;
                @include tablet{
                    font-size: 1.6rem;
                }
            }
        }
    }
    .btnWarp{
        width:16rem;
        margin:0 auto;
        margin-top:4rem;
        @include tablet{
            margin-top:5rem;
        }
        a{
            &::after,
            &::before{
                width:3.2rem;
                
            }
        }
    }
    .termsTop{
        displaY:flex;
        align-items: center; 
        justify-content: space-between;
        margin-top:5rem;
        flex-wrap: wrap;
        @include tablet{
            flex-wrap: nowrap;
        }
        .tabWarp{
            margin-top:0;
             width:100%;
            @include tablet{
                width:auto;
            }
        }
        .searchBoxWarp{
            width:100%;
            margin-top:2rem;
            @include tablet{
                width:auto;
                margin-top:0;
            }
            .searchBox{
                width:100%;
                @include tablet{
                    width:auto;
                }
                .cont-select{
                    width:100%;
                    min-width:30rem;
                }
            }
        }
        
    }
    .termsContents{
            margin-top:4rem;
       h2{
            font-size:1.8rem;
            font-weight: 600;
            @include tablet{
                font-size:2.4rem;
            }
       } 
       h3{
             margin-top:2rem;
             @include tablet{
                margin-top:3rem;
            }
       }
       h4{
             margin-top:4rem;
            
       }
       >p{
            margin-top:2rem;
            line-height:2.2rem;
            font-size: 1.4rem;
            color:#676767;
       }
       ul,ol{
            margin-top:2rem;
            li{
                line-height:2.2rem; 
                font-size: 1.4rem;
                color:#676767;
            }
        }
        ol{
            li{
                padding: 0.2rem 0;
                span{
                    line-height:2.2rem;
                    font-size: 1.4rem;
                    &::before{
                        display:block; 
                        padding-right:0.5rem; 
                        font-style:normal;
                        margin-top:0.2rem;
                    }
                }
                ol{
                    margin-top: 0.3rem;
                    margin-bottom: 1rem;
                    li{
                        padding: 0 0 0 2rem;
                        span{
                            line-height:2.2rem;
                            font-size: 1.4rem;
                            &::before{
                                display:block; 
                                padding-right:0.5rem; 
                                font-style:normal;
                                margin-top:0.2rem;
                            }
                        }
                        // &:nth-child(1){&::before{content: "1. ";}}
                        // &:nth-child(2){&::before{content: "2. ";}}
                        // &:nth-child(3){&::before{content: "3. ";}}
                        // &:nth-child(4){&::before{content: "4. ";}}
                        // &:nth-child(5){&::before{content: "5. ";}}
                        // &:nth-child(6){&::before{content: "6. ";}}
                        // &:nth-child(7){&::before{content: "7. ";}}
                        // &:nth-child(8){&::before{content: "8. ";}}
                        // &:nth-child(9){&::before{content: "9. ";}}
                        // &:nth-child(10){&::before{content: "10. ";}}
                        // &:nth-child(11){&::before{content: "11. ";}}
                        // &:nth-child(12){&::before{content: "12. ";}}
                        // &:nth-child(13){&::before{content: "13. ";}}
                        // &:nth-child(14){&::before{content: "14. ";}}
                        // &:nth-child(15){&::before{content: "15. ";}}    
                    }
                    
                }
                
                // &:nth-child(1){&::before{content: "① ";}}
                // &:nth-child(2){&::before{content: "② ";}}
                // &:nth-child(3){&::before{content: "③ ";}}
                // &:nth-child(4){&::before{content: "④ ";}}
                // &:nth-child(5){&::before{content: "⑤ ";}}
                // &:nth-child(6){&::before{content: "⑥ ";}}
                // &:nth-child(7){&::before{content: "⑦ ";}}
                // &:nth-child(8){&::before{content: "⑧ ";}}
                // &:nth-child(9){&::before{content: "⑨ ";}}
                // &:nth-child(10){&::before{content: "⑩ ";}}
                // &:nth-child(11){&::before{content: "⑪ ";}}
                // &:nth-child(12){&::before{content: "⑫ ";}}
                // &:nth-child(13){&::before{content: "⑬ ";}}
                // &:nth-child(14){&::before{content: "⑭ ";}}
                // &:nth-child(15){&::before{content: "⑮ ";}}
            }
        }
    }
    .memberJoinBoxWrap {
        margin-top: 5rem;
        @media (max-width: 768px) {
            margin-top: 4rem;
        }
        .JoinBoxTopper{
            @media (min-width: 769px) {
                padding-left: 0;
            }
            @media (max-width: 768px) {
                margin-bottom: 3rem;
                padding-bottom: 2.4rem;
                border-bottom: 1px solid #DEDEDE;
            }
            label{
                display:flex;
                justify-content: flex-start;
                align-items: center;
                width: fit-content;
                input{
                    min-width:2rem;
                }
                span{
                    margin-left:1rem;
                    font-size: 1.6rem;
                    line-height: 2.4rem;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        line-height: 2.2rem;
                    }
                }
                a {
                    font-size: 1.6rem;
                    font-weight: 400;
                    color: #676767;
                    margin-left: 1rem;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        margin-left: 0.5rem;
                    }
                }
            }
            .agree-all{
                font-weight: 600;
            }
        }
        .memberJoinBox {
            padding: 4rem;
            border: 1px solid #DEDEDE;
            border-radius: 0.6rem;
            margin-top: 2rem;
            @media (max-width: 768px) {
                margin-top: 0;
                padding: 0;
                border: none;
            }
            label{
                display:flex;
                justify-content: flex-start;
                align-items: flex-start;
                width: fit-content;
                input{
                    min-width:2rem;
                    margin-top: 0.2rem;
                }
                span{
                    margin-left:1rem;
                    font-size: 1.6rem;
                    line-height: 2.4rem;
                    letter-spacing: -0.05em;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        line-height: 2.2rem;
                    }
                }
                a {
                    font-size: 1.6rem;
                    font-weight: 400;
                    color: #676767;
                    margin-left: 1rem;
                    text-decoration: underline;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        margin-left: 0.5rem;
                    }
                }
            }
            .title {
                font-size: 2.4rem;
                font-weight: 600;
                color: #000000;
                line-height: 3.2rem;
                @media (max-width: 768px) {
                    font-size: 1.8rem;
                    line-height: 2.4rem;
                }
            }
            .unitCheck {
                padding: 3rem 0 0;
                border-bottom: 0;
                @media (max-width: 768px) {
                    padding: 2.5rem 0 2rem 0;
                    border-bottom: 1px solid #DEDEDE;
                }
                label {
                    &:last-child {
                        margin-top: 2.4rem;
                    }
                }
            }
            .unitCheck2 {
                padding: 3rem 0;
                border-top: 1px solid #DEDEDE;
                @media (max-width: 768px) {
                    padding: 2.5rem 0 2rem 0;
                }
                .info {
                    padding-bottom: 2.4rem;
                    font-size: 2.4rem;
                    font-weight: 600;
                    color: #000000;
                    line-height: 3.2rem;
                    @media (max-width: 768px) {
                        font-size: 1.8rem;
                        line-height: 2.4rem;
                    }
                }
                label {
                    &:last-child {
                        margin-top: 2rem;
                    }
                }
            }
            .marketingCheck {
                padding-bottom:0;
                @media (max-width: 768px) {
                    margin-top: 3rem;
                    padding-bottom:2rem;
                    border-bottom: 1px solid #DEDEDE;
                }
                span {
                    font-size: 1.6rem;
                    font-weight: 600;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        line-height: 2.4rem;
                    }
                }
                label {
                    + label {
                        margin-top: 2rem;
                    }
                }
            }
            .allCheck {
                margin-top: 3rem;
                @media (max-width: 768px) {
                    margin-top: 2rem;
                }
                span {
                    font-size: 1.6rem;
                    font-weight: 600;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                        line-height: 2.4rem;
                    }
                }
            }
            .contents {
                margin-top: 2rem;
                font-size: 1.6rem;
                font-weight: 400;
                color: #676767;
                line-height: 2.4rem;
                @media (max-width: 768px) {
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                }
                @include maxtablet{
                    .table-wrap{
                        // margin-left: -2rem;
                        // padding: 0 2rem;
                        // width: calc(100% + 4rem);
                    }
                }
            }
            .optionNotice{
                margin-bottom: 2rem;
                font-size: 1.6rem;
                font-weight: 400;
                color: #676767;
                line-height: 2.4rem;
                @media (max-width: 768px) {
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                }
            }
        }
        .all-agree {
            margin-top:3rem;
            padding-left:4rem;
            .allCheck {
                display: flex;
                align-items: center;
                span {
                    margin-left: 1rem;
                    font-weight: 600;
                    @media (max-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }
            @media (max-width: 768px) {
                padding-left:0;
            }
        }
    }
}