@charset "UTF-8";
@import 'utils.scss';
/*변수파일 import*/

pre {
    font-family: 'KiaSignature'; 
}

.contentWarp{
    margin-top:0;
    margin-bottom:0;
    .mypageWarp{
        width:100%;
        display:block;
        @include tablet{
            display: flex;
            max-width:120rem;
        }
        .leftLnbWarp{
            width:100%;
            padding-top:5rem;
            
            @include tablet{
                max-width:20rem;
                padding-top:10rem;
                padding-bottom:15rem;
                padding-left: 2rem;
                
            }
            @include desktopMin{
                min-width:30rem;
                max-width: auto;
                
            }
            @include desktopMax{
                padding-left: 0rem;
            }
            .title{
                border-bottom:1px solid #DEDEDE;
                padding-bottom:2.5rem;
                padding-left: 2rem;
                
                @include tablet{
                    padding-bottom: 0;
                    border-bottom:0;
                    padding-left: 0rem;
                }
               
                h1{
                    font-size:3rem;
                    font-weight: 600;
                    @include desktopMin{
                         font-size:4.5rem;
                    }
                }
                p{
                    displaY:none;
                    @include tablet{
                        displaY:flex;
                        align-items: center;
                        margin-top:2rem;
                    }
                    &::before{
                        content: "";
                        width:2rem;
                        height:2rem;
                        display:block;
                        background-image: url(/kr/assets/images/common/icon-user.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                    span{
                        margin-left:0.8rem;
                    }
                }
            }
            .couponArea {
                margin-top: 0;
                @include tablet{
                    margin-top: 2rem;
                }

                dl {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1.2rem 2rem;
                    background-color: #05141F;
                    font-size: 1.4rem;
                    font-weight: 400;
                    color: #FFFFFF;
                    @include tablet{
                        padding: 0.8rem;
                        margin-right: 2rem;
                    }
                    @include desktopMin{
                        margin-right: 3rem;
                    }
                    dt {
                        span {
                            display: inline-block;
                            @include tablet{
                                display: none;
                            }
                            @include desktopMin{
                                display: inline-block;
                            }
                        }
                    }
                }
                .lnbCoupon {
                    border-bottom: 1px solid #666666;
                    margin-bottom: 0;
                    @include tablet{
                        margin-bottom: 0.5rem;
                    }   
                }
            }
            .lnbList{
                padding-top:2rem;
                padding-bottom:1.8rem;
                padding-left: 2rem;
                &::before{
                    content:"";
                    position: absolute;
                    right:0;
                    top:0;
                    display: block;
                    width:5.1rem;
                    height:5.5rem;
                    z-index: 2;
                    background: linear-gradient(270deg, #F3F3F3 0%, rgba(243, 243, 243, 0) 100%);
                    @include tablet{
                        content:none;
                    }
                }
                background-color: #f3f3f3;
                @include tablet{
                    margin-top:6.5rem;
                    padding-top:0rem;
                    padding-bottom:0rem;
                    padding-left: 0rem;
                    background-color: #fff;
                }
               
                ul{
                    display: flex;
                    align-items: center;
                    @include tablet{
                        display: block;
                    }
                    li{
                        width:fit-content;
                        &:last-child{
                            padding-right:2rem;
                        }
                        @include tablet{
                            width:100%;
                        }
                        a{
                            font-size:1.6rem;
                            font-weight: 600;
                            color:#9EA1A2;
                            @include tablet{
                                font-size: 2rem;
                            }
                            &:hover{
                                color:#000;
                            }
                        }
                        .on{
                            color:#000;
                        }
                    }
                    li+li{
                        margin-top:0;
                        margin-left:2rem;
                        @include tablet{
                            margin-top:2.5rem;
                            margin-left:0;
                        }
                        
                    }
                }
            }
        }
        .rightConWarp{
            width:100%;
            padding-top:4rem;
            padding-bottom:9rem;
            padding-left:2rem;
            padding-right:2rem;
            border-left:1px solid #DEDEDE;
            @include tablet{
               padding-top:10rem; 
               padding-bottom:15rem;
            }
            @include desktopMin{
                padding-left: 7rem;
            }
            @include desktopMax{
                padding-right:0rem;
            }
            .conTitle{
                h2{
                    display: none;
                   font-size: 3rem;
                   font-weight: 600; 
                   @include tablet{
                    display:block;
                   }
                }
                p{
                    margin-top:0rem;
                    font-size:1.4rem;
                    line-height: 2.2rem;
                    br{
                        display:none;
                        @include tablet{
                            display:block;
                        }
                    }
                    @include tablet{
                        margin-top:2rem;
                        font-size:1.6rem;
                        line-height: 2.4rem;
                    }
                }
                >div{
                    display:block;
                    align-items: center;
                    justify-content: space-between;
                    margin-top:1.6rem;
                    @include tablet{
                        display:flex;
                    }
                    p{
                        margin-top:0rem;
                        font-size:1.4rem;
                        @include tablet{
                            font-size:1.6rem;
                        }
                    }
                    .searchBoxWarp{
                        margin-top:1rem;
                        @include tablet{
                            margin-top:0rem;
                        }
                        .searchTextBox{
                            border-left:1px solid #DEDEDE;
                        }
                    }
                }
            }
            .conTitle.serviceOut{
              h2{
                   display:block;
                   font-size: 2rem;
                   font-weight: 600; 
                   @include tablet{
                    font-size: 3rem;
                   }
                }
                p{
                    margin-top:1.5rem;
                    @include tablet{
                        margin-top:2rem;
                    }
                }  
            }
            .tabWarp{
                margin-top:0rem;
                @include tablet{
                    margin-top:4rem;
                }
            }
            .myItemWarp{
                margin-top:3rem;
                width:100%;
                >div{
                    h3{
                        font-size:1.8rem;
                        font-weight: 600;
                        @include tablet{
                            font-size: 2rem;
                        }
                    }
                    .itemListWarp{
                        margin-top:2rem;
                        >ul{
                            >li{
                                border:1px solid #DEDEDE;
                                border-radius: 0.6rem;
                                
                                .cartItem{
                                    displaY:flex; 
                                    width:100%;
                                    flex-wrap: wrap;
                                    flex-shrink:2;
                                    align-items: center;
                                    padding: 2rem;
                                    @include tablet{
                                        flex-wrap: nowrap;
                                        padding: 0;
                                    }
                                    @include desktopMin{
                                        justify-content: space-between;
                                        flex-wrap: nowrap;
                                    }
                                    
                                    .cartItemInfo{
                                        display:flex;
                                        width: 100%;
                                        flex-wrap: wrap;
                                        align-items: center;
                                        padding-bottom:2rem;
                                        margin-bottom:2rem;
                                        border-bottom:1px solid #DEDEDE;
                                        @include tablet{
                                            padding-bottom:0;
                                            margin-bottom:0;
                                            border-bottom:none;
                                            flex-wrap: nowrap;
                                        }
                                        
                                        >div{
                                            display: flex;
                                            > p{
                                                min-width:7.5rem;
                                                height: 7.5rem;
                                                overflow: hidden;
                                                margin-left:0rem;
                                                @include tablet{
                                                    min-width:10rem;
                                                    height:10rem;
                                                    margin-left:0rem;
                                                }
                                                @include desktopMin{
                                                    min-width:14rem;
                                                    height:14rem;
                                                }
                                                img{
                                                    width: 100%;
                                                    height: 100%;
                                                    object-fit: cover;
                                                    border-radius: 0.6rem;
                                                    aspect-ratio: 1 / 1;
                                                    @include tablet{
                                                        border-radius: 0;
                                                    }
                                                }
                                            }
                                            dl{
                                                margin-left:1.5rem;
                                                displaY:flex; 
                                                flex-wrap: wrap;
                                                flex-direction: column;
                                                align-items: center;
                                                justify-content: center;
                                                width: 100%;
                                                @include tablet{
                                                    max-width: 50%;
                                                    margin-left:2rem;
                                                }
                                                @include desktopMin{
                                                    max-width: 50%;
                                                }
                                                dt{
                                                    font-weight: 600;
                                                    font-size: 1.6rem;
                                                    color:#000;
                                                    line-height:2rem;
                                                    @include desktopMin{
                                                        font-size: 2rem;
                                                        line-height: 2.6rem;
                                                    }
                                                    
                                                }
                                                dd{
                                                    font-weight: 400;
                                                    font-size: 1.4rem;
                                                    line-height: 1.2;
                                                    color:#676767; 
                                                    span{
                                                        display: block;
                                                        font-size: 1.4rem;
                                                        color: #05141F;
                                                        margin-bottom:1rem;
                                                        font-weight: 700;
                                                    }
                                                
                                                }
                                                dt,
                                                dd{
                                                    width:100%;
                                                    white-space: normal;
                                                    display: -webkit-box;
                                                    -webkit-line-clamp: 1;
                                                    -webkit-box-orient: vertical;
                                                    overflow: hidden;
                                                    @include desktopMin{
                                                        -webkit-line-clamp: 2;
                                                    }
                                                }
                                                dt+dd{
                                                    margin-top:1rem;
                                                    @include desktopMin{
                                                        margin-top:1rem;
                                                    }
                                                }
                                                dd+dd{
                                                    margin-top:1.5rem;
                                                    font-size: 1.5rem;
                                                    @include desktopMin{
                                                        margin-top:3rem;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .cartItemInfo+ul{
                                        padding-right: 0;
                                        @include tablet{
                                            min-width:28rem;
                                            padding-right: 2rem;
                                        }
                                        @include desktopMin{
                                            min-width: 30rem;
                                            padding-right: 0;
                                        }
                                        li{
                                            font-size:1.4rem;
                                            color:#000;
                                            font-weight: 400;
                                        }
                                        li+li{
                                            margin-top:0.5rem;
                                            
                                        }
                                    }
                                }
                                .components {
                                    background-color: #F3F3F3;
                                    padding: 3rem;
                                    @include maxtablet{
                                        padding: 2rem;
                                    }
                                    .componentsTitle {
                                        font-size: 1.6rem;
                                        font-weight: 600;
                                        color: #000000;
                                        @include maxtablet{
                                            font-size: 1.4rem;
                                        }
                                    }
                                    .componentsList {
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: center;
                                        flex-wrap: wrap;
                                        margin-top: 0.2rem;
                                        @include maxtablet{
                                            display: block;
                                            margin-top: 0.8rem;
                                        }
                                        .item {
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            width: 33.333%;
                                            text-align: center;
                                            margin-bottom: 1.5rem;
                                            padding-right: 1.5rem;
                                            @media(max-width: 1024px){
                                                width: 100%;
                                                margin-right: 0;
                                                text-align: left;
                                            }
                                            .itemImg {
                                                width: 4rem;
                                                height: 4rem;
                                                border-radius: 0.6rem;
                                                overflow: hidden;
                                                img {
                                                    width: 4rem;
                                                    height: 4rem;
                                                }
                                            }
                                            .itemTitle {
                                                padding-left: 1.2rem;
                                                font-size: 1.4rem;
                                                font-weight: 600;
                                                line-height: 1.8rem;
                                                text-align: left;
                                                width: calc(100% - 4rem);
                                                @include maxtablet{
                                                    margin-top: 0;
                                                    padding-left: 0.7rem;
                                                    font-weight: 400;
                                                }
                                            }
                                        }
                                    }
                                }
                                .thankInfo{
                                    padding:1rem;
                                    @include tablet{
                                            padding:2rem;
                                        } 
                                    dt{
                                        display: flex;
                                        justify-content: center;
                                        font-weight: 600;
                                        font-size:1.8rem;
                                        line-height:2.4rem;
                                        text-align: center;
                                        @include tablet{
                                            font-size:2rem;
                                        } 
                                    }
                                    dd{
                                        display: flex;
                                        justify-content: center;
                                       font-size:1.4rem;
                                       margin-top:1rem;
                                       @include tablet{
                                        font-size:1.6rem;
                                       } 
                                    }
                                }
                            }
                            li+li{
                                margin-top:1rem;
                            }
                            
                        }
                    }
                }
                >div.subScription{
                    .itemListWarp {
                       ul{
                            li{
                                .cartItem {
                                    .cartItemInfo {
                                        >div{
                                            dl{
                                                dt{
                                                    span{
                                                        color:#F3C300;
                                                        font-size:1.4rem;
                                                        display:block; 
                                                        margin-bottom:1rem;
                                                    }
                                                    
                                                }
                                            } 
                                        }
                                    }
                                }
                            }
                       } 
                    }
                    
                }
                >div+div{
                    margin-top:1.5rem;
                    @include tablet{
                        margin-top:4rem;
                    }
                }
                >div.myPayList{
                    width:100%;
                   > ul{
                    width:100%;
                        >li{
                            border:1px solid #DEDEDE;
                            border-radius: 0.6rem;
                            width:100%;
                            overflow: hidden;
                            .paySummary{
                                padding:2rem;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                flex-wrap: wrap;
                                @include tablet{
                                    padding:3rem;
                                }
                                @include desktopMin{
                                    flex-wrap: nowrap;
                                }
                                dl{
                                    width:100%;
                                    @include desktopMin{
                                        width:60%;
                                    }
                                    dt{
                                        font-weight: 600;
                                        font-size: 1.6rem;
                                        line-height: 2.4rem;
                                        .badge {
                                            margin-right: 1rem;
                                            padding: 0.4rem 0.5rem 0.3rem 0.6rem;
                                            font-size: 1.2rem;
                                            font-weight: 600;
                                            color: #ffffff;
                                            background-color: #FF0000;
                                        }
                                    }
                                    dd{
                                        display:flex; 
                                        justify-content: space-between;
                                        margin-top:2rem;
                                        ul{
                                            li{
                                                font-size: 1.4rem;
                                            }
                                            li+li{
                                                margin-top:1rem;
                                            }
                                        }
                                    }
                                }
                                div.totalPay{
                                    width: 100%;
                                    margin-top:2rem;
                                    padding-top: 1rem;
                                    border-top:1px solid #DEDEDE;
                                    @include desktopMin{
                                        width: 40%;
                                        margin-top:0;
                                        padding-top: 0;
                                        border-top:0;
                                    }
                                    dl {
                                        display:flex; 
                                        align-items: center;
                                        width:100%;
                                        padding-top:1rem;
                                        justify-content: space-between;
                                        @include desktopMin{
                                            justify-content: space-between;
                                            padding-top:0.5rem;
                                        }
                                        dt{
                                            font-size: 1.6rem; 
                                            font-weight: 400;
                                        }
                                        dd{
                                            margin-top:0;
                                            margin-left:1rem;
                                            font-weight: 400;
                                            font-size: 1.6rem; 
                                            &.amount {
                                                font-weight: 600;
                                                font-size: 1.8rem; 
                                                color: #000000;
                                            }
                                        }
                                        &.totalInfo {
                                            margin-top: 1.5rem;
                                            padding-top: 1.5rem;
                                            border-top: 1px dashed #DEDEDE;
                                            dt{
                                                font-weight: 600;
                                                color: #000000;
                                            }
                                            dd{
                                                &.amount {
                                                    font-weight: 600;
                                                    font-size: 1.8rem; 
                                                    color: #000000;
                                                }
                                            }
                                        }
                                    }
                                    
                                    
                                    
                                }
                            }
                            .openView{
                                width:100%;
                                height:5rem;
                                align-items: center;
                                justify-content: center;
                                background-color:#F3F3F3 ;
                                display:flex;
                                border-top:1px solid #DEDEDE;
                                span{
                                    color:#676767;
                                    font-size: 1.4rem;
                                    font-weight: 600;
                                }
                                &::after{
                                    content: "";
                                    display: block;
                                    margin-left:0.8rem;
                                    width:1.2rem;
                                    height:0.6rem;
                                    background-image: url(/kr/assets/images/common/icon-arrow_black.svg);
                                    background-repeat: no-repeat;
                                    background-size: contain;
                                    background-position: center right;
                                }
                            }
                            .openView.active{
                                &::after{
                                    content: "";
                                    transform: rotate(-180deg);
                                    background-position: center left;
                                }
                            }
                            .payAll{
                                border-top:1px solid #DEDEDE;
                                display:none;
                                .tableHead{
                                    width:100%;
                                    display: none;
                                    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
                                    border-bottom:1px solid #aaa;
                                    padding-top:2.5rem;
                                    padding-bottom:2.5rem;
                                    padding-left:3rem;
                                    @include tablet{
                                        display: grid;
                                    }
                                    p{
                                        font-size:1.4rem;
                                        font-weight: 600;
                                        color:#676767;
                                    }
                                }
                                ul{
                                    li{
                                        border-bottom:1px solid #DEDEDE;
                                        padding-top:2.5rem;
                                        padding-bottom:2.5rem;
                                        padding-left:2rem;
                                        padding-right:2rem;
                                        display: block;
                                        align-items: center;
                                        grid-template-columns: 2fr 1fr 1fr 2fr;
                                        @include desktopMin{
                                            display: grid;
                                            padding-left:3rem;
                                            padding-right:0rem;
                                        }
                                        &:last-child{
                                            border-bottom:0;
                                        }
                                        p{
                                          font-size: 1.4rem; 
                                          margin-top: 1rem;
                                          @include desktopMin{
                                            margin-top: 0;
                                          }
                                          span {
                                            margin-right: 1rem;
                                            display: inline-block;
                                            @include desktopMin{
                                                display: none;
                                            }
                                          }
                                        }
                                        dl{
                                            width:100%;
                                            border-bottom:1px solid #aaa;
                                            margin-bottom:1.5rem;
                                            padding-bottom:1.5rem;
                                            justify-content: flex-start;
                                            padding-right: 1rem;
                                            @include desktopMin{
                                                justify-content: flex-end;
                                                border-bottom:0;
                                                margin-bottom:0;
                                                padding-bottom:0;
                                            }
                                            dt{
                                                font-weight: 600;
                                                font-size: 1.4rem;
                                                
                                            }
                                            dd{
                                              font-weight: 400;
                                              margin-top:0.5rem; 
                                              font-size: 1.4rem; 
                                            }
                                        }
                                        div{
                                            display:flex;
                                            margin-top:1rem;
                                            @include desktopMin{
                                                display:grid;
                                                margin-top:0;
                                                grid-template-columns: 1fr 1fr;
                                            }
                                            p{
                                                font-size: 1.4rem;
                                            }
                                            p+p{
                                                border-left:1px solid #DEDEDE;
                                                padding-left:1rem;
                                                margin-left:1rem;
                                                @include desktopMin{
                                                    padding-left:0rem;
                                                    margin-left:0rem;
                                                    border-left:none;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        >li+li{
                            margin-top:3rem;
                        }
                        
                        
                    }
                }
            }
            .btnWarp{
                width:100%;
                margin:0 auto;
                margin-top:4rem;
                a{
                    &::after,
                    &::before{
                        width:3.2rem;
                        @include tablet{
                            width:3.2rem;
                        }
                    }
                }
                @include tablet{
                    width:16rem;
                    margin-top:5rem;
                }
            }
            .carswBtn{
                width:100%;
                margin:0 auto;
                margin-top:5rem;
                @include tablet{
                        width:37rem;
                }
                .towButton{
                    display:flex; 
                    flex-wrap: wrap;
                    @include tablet{
                        flex-wrap: nowrap;
                    }
                    a+a{
                        margin-top:1rem;
                        @include tablet{
                            margin-left:1rem;
                            margin-top:0;
                        }
                    }
                }
            }
            .itemCancel{
                border:1px solid #DEDEDE;
                border-radius: 0.6rem;
                padding:2rem;
                text-align: center;
                margin-top:1rem;
                display:block;
                align-items: center;
                justify-content: center;
                @include tablet{
                    display: flex;
                }
                p{
                    font-size: 1.4rem;
                    color: #676767;
                    display: flex;
                    text-align: center;
                    justify-content: center;
                    @include tablet{
                      font-size: 1.6rem;  
                    }
                }
                p+p{
                    display:flex;
                    align-items: center;
                    margin-top:1rem;
                    @include tablet{
                        margin-top:0;
                    }
                    &::before{
                        content: "";
                        width:1px;
                        height:1.6rem;
                        background-color: #DEDEDE;
                        display:none;
                        margin-left:1rem;
                        margin-right:1rem;
                        @include tablet{
                            display: block;
                        }
                    }
                }
            }
            .infoRefundDefault{
                margin-top: 3rem;
                padding-bottom: 1rem;
                ul{
                    li{
                        position: relative;
                        font-size: 1.4rem;
                        font-weight: 400;
                        color: #676767;
                        line-height: 2.2rem;
                        padding: 0.5rem 0 0.5rem 1rem;
                        &::before{
                            content: "∙";
                            position: absolute;
                            top: 0.6rem;
                            left: 0;
                        }
                    }
                }
            }
            .infoRefund {
                margin-top: 3rem;
                .title {
                    font-size: 1.8rem;
                    font-weight: 600;
                    color: #000000;
                    @media(max-width: 768px){
                        font-size: 1.6rem;
                    }
                }
                ul{
                    margin-top: 1rem;
                    li{
                        position: relative;
                        font-size: 1.4rem;
                        font-weight: 400;
                        color: #676767;
                        line-height: 2.2rem;
                        padding: 0.5rem 0 0.5rem 1rem;
                        &::before{
                            content: "∙";
                            position: absolute;
                            top: 0.6rem;
                            left: 0;
                        }
                    }
                }
            }
            .infoRefundStep {
                margin-top: 3rem;
                .title {
                    font-size: 1.8rem;
                    font-weight: 600;
                    color: #000000;
                    @media(max-width: 768px){
                        font-size: 1.6rem;
                    }
                }
                ul{
                    margin-top: 1rem;
                    li{
                        position: relative;
                        font-size: 1.4rem;
                        font-weight: 400;
                        color: #676767;
                        line-height: 2.2rem;
                        padding: 0.5rem 0 0.5rem 1rem;
                    }
                }
            }
            .infoRefundCalc {
                margin-top: 3rem;
                .title {
                    font-size: 1.8rem;
                    font-weight: 600;
                    color: #000000;
                    @media(max-width: 768px){
                        font-size: 1.6rem;
                    }
                }
                .titleSec {
                    margin-top: 3rem;
                    font-size: 1.8rem;
                    font-weight: 600;
                    color: #000000;
                    @media(max-width: 768px){
                        font-size: 1.6rem;
                    }
                }
                .info {
                    margin-top: 1rem;
                    font-size: 1.4rem;
                    font-weight: 400;
                    color: #676767;
                    line-height: 2.2rem;
                }
                .completeForm{
                    margin-top:2rem;
                    >div{
                        border-top:1px solid #999999;
                        @include tablet{
                            border-top:1px solid #DEDEDE;
                        }
                        >dl{
                            border-bottom:1px solid #DEDEDE;
                            display:flex;
                            flex-wrap: wrap;
                            @include tablet{
                                flex-wrap: nowrap;
                            }
                            &:last-child{
                                border-bottom:1px solid #999;
                                @include tablet{
                                    border-bottom:1px solid #DEDEDE;
                                }
                            }
                            >dt{
                                padding-top:1rem; 
                                @include tablet{
                                    padding-top:2.2rem; 
                                    padding-bottom:2.2rem;
                                }
                            }
                            >dd{
                                padding-top:1rem; 
                                padding-bottom:1rem;
                                font-weight: 600;
                                @include tablet{
                                    padding-top:2.2rem; 
                                    padding-bottom:2.2rem;
                                    font-weight: 400;
                                }
                            } 
                            >dt{
                                width:100%;
                                font-size: 1.4rem;
                                padding-left:0rem;
                                text-align: left;
                                padding-bottom:0;
                                color:#676767;
                                font-weight: 700;
                                @include tablet{
                                    position: relative;
                                    font-size: 1.6rem;
                                    padding-bottom:2.2rem;
                                    min-width:15.7rem; 
                                    width:auto;
                                    &::after {
                                        content: "";
                                        position: absolute;
                                        top: 2.2rem;
                                        right: 0;
                                        width: 0.1rem;
                                        height: 1.6rem;
                                        background-color: #DEDEDE;
                                    }
                                }
                            }
                            >dt.calc{
                                @include tablet{
                                    &::after {
                                        content: "";
                                        height: 4.6rem;
                                    }
                                }
                            }
                            >dd{
                                padding-left:0;
                                 width:100%;
                                 font-size: 1.4rem;
                                 color:#000;
                                 line-height: 2.2rem;
                                 @include tablet{
                                    padding-left:2rem;
                                    font-size: 1.6rem;
                                    line-height: 2.4rem;
                                 }
                            }   
                        }
                    }
                }
            }
            .itemInfo{
                margin-top:7rem;
                h3{
                    font-size:1.8rem;
                    font-weight: 600;
                    @include tablet{
                        font-size: 2rem;
                    }
                }
                .editBox{
                    margin-top:2rem;
                    border-top:1px solid #DEDEDE;
                    border-bottom:1px solid #DEDEDE;
                    padding:2rem 0; 
                    @media(max-width: 768px){
                        border-top: none;
                        border-bottom: none;
                        padding:1.5rem 0; 
                    }
                }
            }
            .cancleInfo{
                margin-top:4rem;
                @include tablet{
                    margin-top:5rem;
                }
                dl{
                    dt{
                        font-size:1.6rem;
                        font-weight: 600;
                        line-height:2.4rem;
                        @include tablet{
                            font-size: 1.8rem;
                        }
                    }
                    dd{
                        font-size:1.4rem;
                        margin-top:1rem;
                        line-height: 2.4rem;
                        color:#000;
                        @include tablet{
                            font-size: 1.4rem;
                        }
                    }
                }
                dl+dl{
                    margin-top:3rem;
                }
                .cancleInfoCon{
                    margin-top:3rem ;
                    @include tablet{
                        margin-top:3rem;
                    }
                    dd{
                        color:#676767;
                        font-size:1.4rem;
                    }
                }
            }
            .questions{
                margin-top:2rem;
                ul{
                    li{
                        border:1px solid #DEDEDE;
                        border-radius: 0.6rem;
                        padding:2.5rem;
                        @include maxmobile{
                            padding: 2rem   ;
                        }
                        &:hover{
                            border:1px solid #000;
                        }
                        a{
                            >div{
                                display: flex;
                                align-items: center;
                                gap: 0.8rem;
                                .badge{
                                    display: inline-flex;
                                    flex: 0 0 auto;
                                    height: 2.5rem;
                                    width: 6.8rem;
                                    align-items: center;
                                    justify-content: center;
                                    border: 1px solid #DEDEDE;
                                    font-size: 1.4rem;
                                    line-height: 1.4rem;
                                    font-weight: 600;
                                    color: #05141F;
                                    &.mr-12{
                                        margin-right: 1.2rem;
                                    }
                                    &.an {
                                        color: #9EA1A2;
                                    }
                                    &.ay {
                                        color: #000000;
                                    }
                                    @include maxmobile{
                                        width: 5.7rem;
                                        font-size: 1.1rem;
                                    }
                                }
                                // .status{ 
                                //     color:#F3C300;
                                //     font-weight: 600;
                                //     font-size: 1.4rem;
                                // }
                                .inquiry-type{
                                    display: inline-block;
                                    vertical-align: middle;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: 1.4rem;
                                    font-weight: 400;
                                    line-height: 1.4rem;
                                    color: #9EA1A2;
                                    min-width: 6rem;
                                }
                                .inquiry-prd{
                                    display: inline-block;
                                    vertical-align: middle;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: 1.4rem;
                                    font-weight: 400;
                                    line-height: 1.4rem;
                                    color: #9EA1A2;
                                    min-width: 10rem;
                                }
                                em{
                                    position: relative;
                                    color:#9EA1A2;
                                    font-weight: 400;
                                    font-size: 1.4rem;
                                    padding-left: 0.8rem;
                                    &:before{
                                        content: '';
                                        display: inline-block;
                                        position: absolute;
                                        left: 0;
                                        border-left: 1px solid #9EA1A2;
                                        height: 14px;
                                        vertical-align: middle;
                                    }
                                }
                            }
                            >p{
                                margin-top:1rem;
                                color:#000;
                                font-weight: 600;
                                font-size: 1.8rem;
                                line-height:2.4rem;
                                @include maxmobile{
                                    font-size: 1.6rem;
                                }
                            }
                        }
                    }
                    li+li{
                        margin-top:1rem;
                    }
                    
                }
            }
            .questionsView{
                margin-top:3rem;
                border:1px solid #DEDEDE;
                border-radius: 0.6rem;
                padding:2.5rem;
                .usrQuestions,
                .adminAnswer{
                    >div{
                        display: flex;
                        align-items: center;
                        gap: 0.8rem;
                        .badge{
                            display: inline-flex;
                            flex: 0 0 auto;
                            height: 2.5rem;
                            width: 6.8rem;
                            align-items: center;
                            justify-content: center;
                            border: 1px solid #DEDEDE;
                            font-size: 1.4rem;
                            line-height: 1.4rem;
                            font-weight: 600;
                            color: #05141F;
                            &.mr-12{
                                margin-right: 1.2rem;
                            }
                            &.an {
                                color: #9EA1A2;
                            }
                            &.ay {
                                color: #000000;
                            }
                            @include maxmobile{
                                width: 5.7rem;
                                font-size: 1.1rem;
                            }
                        }
                        .inquiry-type{
                            display: inline-block;
                            vertical-align: middle;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 1.4rem;
                            font-weight: 400;
                            line-height: 1.4rem;
                            color: #9EA1A2;
                            min-width: 6rem;
                        }
                        .inquiry-prd{
                            display: inline-block;
                            vertical-align: middle;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 1.4rem;
                            font-weight: 400;
                            line-height: 1.4rem;
                            color: #9EA1A2;
                            min-width: 10rem;
                        }
                        em{
                            flex: 1 0 13.5rem;
                            position: relative;
                            color:#9EA1A2;
                            font-weight: 400;
                            font-size: 1.4rem;
                            white-space: nowrap;
                        }
                    }
                    dl{
                        margin-top:1rem;
                        dt{
                            font-size:1.8rem;
                            font-weight: 600;
                        }
                        dd{
                            margin-top:2rem;
                            font-size: 1.4rem;
                            color: #676767;
                            line-height: 2.4rem;
                            @include tablet{
                                font-size: 1.6rem;
                            }
                        }
                    }
                }
                .usrQuestions{
                    >div{
                        em{
                            padding-left: 0.8rem;
                            &:before{
                                content: '';
                                display: inline-block;
                                position: absolute;
                                left: 0;
                                border-left: 1px solid #9EA1A2;
                                height: 14px;
                                vertical-align: middle;
                            }
                        }
                    }
                }
                .fileBox{
                    margin-top:2rem;
                    background-color: #f3f3f3;
                    width:fit-content;
                    padding:0 1rem;
                    display:flex; 
                    align-items: center;
                    justify-content: space-between;
                    @include desktopMin{
                        width:fit-content;
                        margin-top:3rem;
                    }
                    p{
                        display: flex;
                        color:#000;
                        font-size: 1.6rem;
                        &::after{
                            content:"";
                            width:2rem;
                            height:2rem;
                            display:block; 
                            background-image: url(/kr/assets/images/common/icon-file.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                            margin-left:1rem;
                        }
                    }
                    
                    
                }
                .adminAnswer{
                    margin-top:2.5rem;
                    padding-top:2.5rem;
                    border-top:1px solid #dedede;
                }
            }
            .listbtnWarp{
                width:100%;
                margin:0 auto;
                margin-top:6rem;
                @include desktopMin{
                    width:16rem;
                    margin-top:7rem;
                }
                a::before,
                a::after{
                    width:3.2rem;
                   @include desktopMin{
                       width:3.2rem;
                    }
                    
                }
                .oneButton{
                    width: 16rem;
                    @include maxmobile{
                        width: 100%;
                    }
                }
            }
            .myAccount{
                margin-top:4rem;
                @include tablet{
                    margin-top:5rem;
                }
                .myinfomation{
                    bordeR:1px solid #dedede;
                    padding:2.5rem;
                    border-radius: 0.6rem;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    @include desktopMin{
                        flex-wrap: nowrap;
                    }
                    >div{
                        width:100%;
                        p{
                            display:flex;
                            align-items: center;
                            font-size:1.4rem;
                            
                            @include tablet{
                                    font-size: 1.6rem;
                            }
                            strong{
                                font-size: 1.8rem;
                                font-weight: 600;
                                 @include tablet{
                                     font-size: 2rem;
                                }
                            }
                            span{
                                font-size: 1.4rem;
                                font-weight: 400;
                                margin-left:1rem;
                                 @include tablet{
                                     font-size: 1.6rem;
                                }
                            }
                            &:nth-child(2){
                                margin-top:2rem;
                                color:#676767;
                                
                            }
                            &:nth-child(3){
                                margin-top:1rem;
                                color:#676767;
                            }
                        }
                        a{
                           font-size: 1.4rem;
                           color:#676767;
                           display: flex;
                           align-items: center;
                           justify-content: space-between;
                           width:fit-content;
                           @include desktopMin{
                                    font-size: 1.6rem;
                                    width:13.5rem;
                            }
                           span{
                            display: block;
                            border-bottom:1px solid #676767;
                           }
                           &::after{
                            content: "";
                            width: 1.6rem;
                            height: 2.5rem;
                            displaY: block;
                            margin-left:0.5rem;
                            background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat;
                            background-size: 1.4rem;
                            transform: rotate(-90deg);
                            @include tablet{
                                background-size: 1.6rem;
                            }
                           }
                        }
                    }
                    div+div{
                        margin-top:3rem;
                        width:fit-content;
                        @include desktopMin{
                            width:17rem;
                            margin-top:0;
                        }
                    }
                }
                .marketingAgrre,
                .outAgrre{
                    margin-top:6rem;
                    h3{
                        strong{
                            font-size: 1.8rem;
                            font-weight: 600; 
                            @include tablet{
                               font-size: 2rem; 
                            }
                        }
                        p{
                            margin-top:1.5rem;
                            line-height: 2.2rem;
                            font-size: 1.4rem; 
                            font-weight: 400;
                             @include tablet{
                               font-size: 1.6rem; 
                               line-height: 2.4rem;
                            }
                        }
                    }
                    .unitCheck2 {
                        margin-top: 0;
                        padding: 3rem 0;
                        border-top: 1px solid #DEDEDE;
                        @media (max-width: 768px) {
                            padding: 2.5rem 0 2rem 0;
                        }
                        .info {
                            margin-top: 0;
                            padding-bottom: 2.4rem;
                            font-size: 1.8rem;
                            color: #000000;
                            font-weight: 600;
                            line-height: 2.6rem;
                            @include tablet{
                                font-size: 2rem; 
                             }
                        }
                        label {
                            margin-top: 0;
                            &:last-child {
                                margin-top: 2rem;
                            }
                        }
                    }
                    .marketingCheck {
                        margin-top: 3rem;
                        padding-bottom: 3rem;
                        @media (max-width: 768px) {
                            margin-top: 2rem;
                        }
                        span {
                            font-size: 1.6rem;
                            font-weight: 400;
                            @media (max-width: 768px) {
                                font-size: 1.4rem;
                                line-height: 2.4rem;
                            }
                        }
                        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;
                            }
                        }
                    }
                    div{
                        margin-top:3rem;

                        label{
                            display:flex;
                            width:100%;
                            align-items: center;
                            cursor: pointer;
                            input{
                                min-width:2rem;
                            }
                            span{
                                margin-left:1rem;
                                font-size: 1.4rem;
                                line-height: 2rem;
                             
                            }
                        }
                        label+label{
                            margin-top:1.5rem;
                        }
                    }
                    .table-wrap{
                        margin-top: 2.4rem;
                    }
                    .noticeTextUnderTable{
                        margin-top: 2.4rem;
                    }
                    @include maxtablet{
                        .table-wrap{
                            // margin-left: -2rem;
                            // padding: 0 2rem;
                            // width: calc(100% + 4rem);
                        }
                    }
                }
                .outAgrre{
                    margin-top:4rem;
                    div{
                        label{
                            align-items: flex-start;
                            @include desktopMax{
                                 align-items: center;
                            }
                        }
                    }
                }
                .serviceOut{
                    margin-top:2rem;
                    @include tablet{
                        margin-top:0;
                    }

                    .editorBox{
                        border:1px solid #DEDEDE;
                        border-radius: 0.6rem;
                        min-height:28rem;
                        padding:2rem;
                    }
                    dl{
                        margin-top:2rem;
                        display:flex;
                        align-items: center;
                        flex-wrap: wrap;
                        @include tablet{
                            flex-wrap: nowrap;
                        }

                        dt{
                            width:100%;
                            font-size:1.4rem;
                            font-weight: 700;
                            color:#676767;
                            @include tablet{
                                width:16rem;
                                font-size:1.6rem;
                            }
                        }
                        dd{
                            width:100%;
                            margin-top:1rem;
                            @include tablet{
                                margin-top:0rem;
                            }
                            input{
                                width:100%;
                                border:1px solid #DEDEDE;
                                height:4.5rem;
                                padding:1.5rem;
                                font-size:1.4rem;
                                @include tablet{
                                    font-size:1.6rem;
                                    height:5rem;
                                    padding:1.5rem 1.7rem;
                                }
                            }
                        }
                    }
                    .noOutInfo{
                        
                        dl{
                            display:block; 
                            padding-top:2rem;
                            padding-bottom:2rem;
                            @include desktopMin{
                              display:flex;  
                               padding-top:0rem;
                               padding-bottom:0rem; 
                            }
                            &:first-child{
                                border-top:1px solid #999;
                                @include desktopMin{
                                    border-top:1px solid #DEDEDE;
                                }
                            }
                            dt{
                                width:100%;
                                font-size: 1.4rem;
                                @include desktopMin{
                                     width:15.3rem;
                                    background-color: #F3F3F3; 
                                    padding:3rem 2rem;
                                    font-size: 1.6rem;
                                }
                            }
                            dd{
                                margin-top:1.5rem;
                                font-size: 1.4rem;
                                line-height:2.2rem;

                                @include desktopMin{
                                    padding-left:3rem;
                                    margin-top:0;
                                    font-size: 1.6rem;
                                    line-height:2.4rem;
                                }
                            }
                        }
                        dl+dl{
                            margin-top:0;
                            border-bottom:1px solid #999;
                            border-top:1px solid #DEDEDE;

                             @include desktopMin{
                                border-bottom:1px solid #DEDEDE;
                             }
                        }
                    }
                    h3 {
                        font-size: 1.8rem;
                        font-weight: 600;
                        color: #000000;
                        @include tablet{
                            font-size: 2rem;
                        }
                    }
                    .radioArea{
                        margin-top: 2.4rem;
                        @include tablet{
                            margin-top: 3rem;
                        }
                        .radioItem {
                            display: block;
                            margin-bottom: 2rem;

                            [type="radio"] {
                                position: relative;
                                top: -0.1rem;
                                vertical-align: middle;
                                appearance: none;
                                border: max(1px, 0.1em) solid #05141F;
                                border-radius: 50%;
                                width: 1.5rem;
                                height: 1.5rem;
                                transition: border 0.3s ease-in-out;
                            }
                            [type="radio"]:checked::after {
                                content: ''; 
                                position: absolute; 
                                top: 0.3rem; 
                                left: 0.3rem; 
                                width: 0.7rem; 
                                height: 0.7rem; 
                                background: #000000; 
                                border-radius: 100%; 
                            }
                            
                            [type="radio"]:disabled {
                                background-color: #DEDEDE;
                                box-shadow: none;
                                opacity: 0.7;
                                cursor: not-allowed;
                            }
                                
                            [type="radio"]:disabled + span {
                                opacity: 0.5;
                                cursor: not-allowed;
                            }
                            
                            
                            span {
                                position: relative;
                                font-size: 1.4rem;
                                font-weight: 400;
                                padding-left: 0.5rem;
                                color: #000000;
                                @include tablet{
                                    font-size: 1.6rem;
                                }
                            }
                            &.none {
                                span {
                                    &::before {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                    .otherReasons {
                        input{
                            width:100%;
                            border:1px solid #DEDEDE;
                            height:4.5rem;
                            padding:1.5rem;
                            font-size:1.4rem;
                            @include tablet{
                                font-size:1.6rem;
                                height:5rem;
                                padding:1.5rem 1.7rem;
                            }
                        }
                    }
                }
                .outInfo{
                    border:1px solid #DEDEDE;
                    border-radius: 0.6rem;
                    padding:3rem 2rem; 
                    @include tablet{
                        padding:4rem;
                    }
                    p{
                        text-align: center;
                        strong{
                            font-size: 1.8rem;
                            font-weight: 600;
                            line-height: 2.4rem;
                            @include tablet{
                                 font-size: 2rem;
                            }
                        }
                        span{
                           font-size: 1.4rem;
                            font-weight: 400; 
                            line-height:2.2rem;
                            @include tablet{
                                 font-size: 1.6rem;
                                 line-height:2.4rem;
                            }
                        }
                    }
                    p+p{
                        margin-top:2rem;
                    }
                }
                
            }
            .memberOut{
                display: block;
                width:20rem;
                margin:0 auto; 
                margin-top:6rem;
                font-size: 1.4rem;
                color:#676767;
                display: flex;
                align-items: center;
                justify-content: space-between;
                 @include tablet{
                    font-size: 1.6rem; 
                    width:22rem;
                    }
                span{
                    display: block;
                    border-bottom:1px solid #676767;
                }
                &::after{
                content: "";
                    width: 1.6rem;
                    height: 2.5rem;
                    displaY: block;
                    margin-left:0.5rem;
                    background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat;
                    background-size: 1.4rem;
                    transform: rotate(-90deg);
                    @include tablet{
                        font-size: 1.6rem; 
                    }
                }
            }
            .inquiryBtn{
                padding-top:5rem;
                width:100%;
                margin:0 auto;
                @include tablet{
                    width:16rem;
                }
            }
            .itemStreaming{
                margin-top:2rem;
                >p{
                    color:#000;
                    font-size:1.4rem;
                    margin-top:1rem; 
                    line-height:2.2rem;
                        @include desktopMin{
                        font-size:1.6rem;  
                        line-height:2.4rem;
                    }
                }
                >span{
                    display: block;
                    color:#676767;
                    font-size:1.4em; 
                    margin-top:1.5rem;
                        line-height:2.2rem;
                        @include desktopMin{
                        font-size:1.6rem;
                        line-height:2.4rem;  
                    }
                }
                ul{
                    li{
                        input[type=radio]{
                            visibility: hidden;
                            position: absolute;
                            &:checked + label{
                                background-color: #05141F;
                                dt,dd{
                                    color:#fff;
                                    p,strong{
                                        color:#fff;
                                    }
                                }
                                    
                            }
                        }
                        label{
                            display: block;
                            padding:2.5rem;
                            border:1px solid #DEDEDE;
                            border-radius: 0.6rem;
                            cursor: pointer;
                            dl{
                                dt{
                                    font-size: 1.8rem;
                                    font-weight: bold;
                                }
                                dd{
                                    margin-top:1rem;
                                    p{
                                        color:#676767;
                                        font-size: 1.6rem;
                                        line-height:2.4rem;
                                    }
                                    strong{
                                        display: block;
                                        color:#676767;
                                        font-size: 1.6rem;
                                        line-height:2.4rem;
                                        font-weight: bold;
                                        margin-top:2rem;
                                    }
                                }
                                dd:last-child{
                                    
                                    margin-top:3rem;
                                    @include tablet{
                                        display:flex; 
                                        justify-content: space-between;
                                        align-items: center;    
                                    }
                                    .fee {
                                        font-weight: bold;
                                        font-size: 2rem;
                                        display:flex; 
                                        justify-content: flex-end;
                                        @include tablet{
                                            display: block;
                                        }
                                    }
                                    .btnWarp {
                                        margin: initial;
                                        margin-top: 3rem;
                                        @include tablet{
                                            margin-top: 0;
                                        }
                                        .oneButton {
                                            a {
                                                p {
                                                    color: #676767 !important;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            &:hover{
                                border:1px solid #000;
                            }
                        }
                    }
                    li+li{
                        margin-top:1rem;
                    }
                }
            }
            .serviceLinkage {
                margin-bottom: 5rem;
                @include tablet{
                    margin-bottom: 6rem;
                }
            }
        }
    }
}


.productListWarp{
    margin-top:2rem;
    @include desktopMin{
        margin-top:3rem;
    }
    .productLis{
        margin-top:1rem;
        
        ul{
            li{
                
                bordeR:1px solid #DEDEDE;
                border-radius: 0.6rem;
                
                .cartItemWrap {
                    display:flex;
                    padding:2rem;
                    padding-left:2rem;
                    @include maxmobile{
                        flex-wrap: wrap;
                    }
                    @include mobileSmall{
                        flex-wrap: wrap;
                    }
                    @include tablet{
                        flex-wrap: nowrap;
                        justify-content: space-between;  
                    }
                    @include desktopMin{
                        padding:0 3rem 0 0;
                        
                        display:flex; 
                        flex-wrap: nowrap;
                        justify-content: space-between;   
                    }
                    .cartItem{
                        displaY:flex; 
                        width:100%;
                        flex-wrap: wrap;
                        flex-shrink:2;
                        align-items: center;
                        @include tablet{
                            flex-wrap: nowrap;
                            padding-right:3rem;
                        }
                         @include desktopMin{
                            justify-content: space-between;
                            padding-right:5rem;
                            flex-wrap: nowrap;
                         }
                        
                        .cartItemInfo{
                            display:flex;
                            width: 100%;
                            flex-wrap: wrap;
                            align-items: center;
                            
                            @include tablet{
                                padding-bottom:0;
                                 margin-bottom:0;
                                 border-bottom:none;
                                flex-wrap: nowrap;
                            }
                            
                            >div{
                                display: flex;
                                // margin-top: 1.4rem;
                                @include tablet{
                                    margin-top: 0;
                                }
                                > p{
                                    min-width:7.5rem;
                                    height:7.5rem;
                                    overflow: hidden;
                                    border-radius: 0.6rem;
                                    
                                    @include tablet{
                                        min-width:12rem;
                                        height:12rem;
                                        
                                    }
                                    @include desktopMin{
                                        min-width:18rem;
                                        height:18rem;
                                        border-radius: 0;
                                    }
                                    img{
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        aspect-ratio: 1 / 1;
                                    }
                                }
                                dl{
                                    margin-left:1.5rem;
                                    displaY:flex; 
                                    flex-wrap: wrap;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    width: 100%;
                                    @include tablet{
                                        // max-width: 50%;
                                        margin-left:2rem;
                                    }
                                    @include desktopMin{
                                        // max-width: 58%;
                                    }
                                    dt{
                                        font-weight: 600;
                                        font-size: 1.6rem;
                                        color:#000;
                                        line-height: 2rem;
                                        @include desktopMin{
                                            font-size: 2rem;
                                            line-height: 2.6rem;
                                        }
                                    }
                                    dd{
                                    font-weight: 400;
                                        font-size: 1.4rem;
                                        line-height:2rem;
                                        color:#676767; 
                                        @include desktopMin{
                                            line-height:2.2rem;
                                        }
                                    
                                    }
                                    dt,
                                    dd{
                                        width:100%;
                                        white-space: normal;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 1;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                        @include desktopMin{
                                            -webkit-line-clamp: 2;
                                        }
                                    }
                                    dt{
                                        margin-top: 1.2rem;
                                    }
                                    dt+dd{
                                        margin-top:0.5rem;
                                        @include desktopMin{
                                            margin-top:1rem;
                                        }
                                    }
                                    dd+dd{
                                        margin-top:1.5rem;
                                        font-size: 1.4rem;
                                        @include desktopMin{
                                            margin-top:2rem;
                                        }
                                    }
                                }
                            }
                        }
                        .cartItemInfo+dl{
                            
                            @include maxmobile{
                                width:100%;
                            }
                            @include tablet{
                                min-width: 13rem;
                                text-align: right;
                            }
                            @include desktopMin{
                                min-width:13rem;
                                text-align: right;
                            }
                            dt{
                                font-size:1.4rem;
                                @include desktopMin{
                                    font-size:1.6rem;
                                }
                            }
                            dd{
                                font-size:2rem;
                                font-weight: 600;
                                margin-top:1rem;
                                 @include desktopMin{
                                    font-size:2.4rem;
                                }
                            }
                        }
                    } 
                    .addBtnWarp{
                        display: flex;
                        flex-grow: 1;
                        align-items: center;
                        margin-top:3rem;
                         margin-left:4rem;
                        justify-content: flex-end;
                        @include mobile{
                            margin-top:0;
                        }
                        @include maxmobile{
                            
                            width:100%;
                            margin-left:0rem;
                        }
                       
                        @include tablet{
                            
                            flex-basis:18rem;
                            margin-left:0rem;
                        }
                       
                        .towButton{
                            width:100%;
                            min-width:18rem;
                            button+button{
                                margin-top:1rem;
                            }
                            @include mobile{
                                max-width:inherit;
                            }
                            @include tablet{
                               min-width: 15rem; 
                               max-width: 15rem;
                               flex-direction: column;
                            }
                             @include desktopMin{
                               min-width:18rem;
                               max-width:18rem;
                            }
                            .rightBtn {
                                @include tablet{
                                    margin-left: 0;
                                }
                            }
                            
                        }
                    }
                    
                    
                }
                .components {
                    background-color: #F3F3F3;
                    padding: 3rem 3rem 3rem 6rem;
                    @include maxtablet{
                        padding: 2rem;
                    }
                    .componentsTitle {
                        font-size: 1.6rem;
                        font-weight: 600;
                        color: #000000;
                        @include maxtablet{
                            font-size: 1.4rem;
                        }
                    }
                    .componentsList {
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        flex-wrap: wrap;
                        margin-top: 0.2rem;
                        @include maxtablet{
                            display: block;
                            margin-top: 0.8rem;
                        }
                        .item {
                            
                            width: 17rem;
                            margin-top: 1.8rem;
                            margin-right: 1.8rem;
                            text-align: center;
                            @media(max-width: 1024px){
                                width: 10rem;
                            }
                            @include maxtablet{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                width: 100%;
                                margin-top: 1.2rem;
                                margin-right: 0;
                                text-align: left;
                            }
                            
                            .itemImg {
                                width: 17rem;
                                height: 17rem;
                                border-radius: 0.6rem;
                                overflow: hidden;
                                @media(max-width: 1024px){
                                    width: 10rem;
                                    height: 10rem;
                                }
                                @include maxtablet{
                                    width: 4rem;
                                    height: 4rem;
                                }
                                img {
                                    width: 17rem;
                                    height: 17rem;
                                    @media(max-width: 1024px){
                                        width: 10rem;
                                        height: 10rem;
                                    }
                                    @include maxtablet{
                                        width: 4rem;
                                        height: 4rem;
                                    }
                                }
                            }
                            .itemTitle {
                                margin-top: 1.2rem;
                                font-size: 1.4rem;
                                font-weight: 600;
                                line-height: 1.8rem;
                                @include maxtablet{
                                    margin-top: 0;
                                    margin-left: 0.7rem;
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                }


                .componentsPayment {
                    background-color: #F3F3F3;
                    padding: 3rem;
                    @include maxtablet{
                        padding: 2rem;
                    }
                    .componentsTitle {
                        font-size: 1.6rem;
                        font-weight: 600;
                        color: #000000;
                        @include maxtablet{
                            font-size: 1.4rem;
                        }
                    }
                    .componentsList {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 0.2rem;
                        @include maxtablet{
                            display: block;
                            margin-top: 0.8rem;
                        }
                        .item {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            width: 33.333%;
                            text-align: center;
                            margin-bottom: 1.5rem;
                            padding-right: 1.5rem;
                            @media(max-width: 1024px){
                                width: 100%;
                                margin-right: 0;
                                text-align: left;
                            }
                            .itemImg {
                                width: 4rem;
                                height: 4rem;
                                border-radius: 0.6rem;
                                overflow: hidden;
                                img {
                                    width: 4rem;
                                    height: 4rem;
                                }
                            }
                            .itemTitle {
                                padding-left: 1.2rem;
                                font-size: 1.4rem;
                                font-weight: 600;
                                line-height: 1.8rem;
                                text-align: left;
                                width: calc(100% - 4rem);
                                @include maxtablet{
                                    margin-top: 0;
                                    padding-left: 0.7rem;
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                }

                .componentsReview {
                    border-top: 1px solid #DEDEDE;
                    padding: 3rem;
                    @include maxtablet{
                        padding: 2rem;
                    }
                    .date {
                        font-size: 1.4rem;
                        color: #676767;
                    }
                    .contents {
                        margin-top: 1.5rem;
                        font-size: 1.6rem;
                        line-height: 2.4rem;
                        color: #000000;
                    }
                }
               
            }
            li+li{
                margin-top:1rem;
            }
            .noPrice{
                
                padding:2rem;
                text-align: center;
                

                @include tablet{
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: space-between;
                }
               
                @include desktopMin{
                    padding-left:3rem;
                    min-height:17rem;
                }
                >p{
                    font-weight: 600;
                    font-size: 1.8rem;
                    color:#9EA1A2;
                   
                    @include desktopMin{
                        font-size: 2.4rem;
                    }
                }
                .PriceGoList{
                    displaY:flex;
                    flex-wrap: wrap;
                    width:100%;
                    margin: 0 auto;
                    @include maxtablet{
                        width:18rem;
                    }
                    @include maxmobile{
                        width:100%;
                    }
                    @include tablet{
                        flex-wrap: nowrap;
                        margin:0;
                        width:fit-content;
                    }
                    @include desktopMin{
                        flex-wrap: nowrap;
                        margin:0;
                        width:fit-content;
                    }
                    > p{
                        width:100%;
                        display:flex; 
                        align-items: center;
                        font-size:2.4rem;
                        font-weight: 600;
                    }
                    .oneButton{
                        
                        margin-top:3rem;
                        @include tablet{
                            margin-top:0;
                            min-width:15rem;
                            margin-left:5rem;
                            width:fit-content;
                        }
                        @include desktopMin{
                            margin-top:0;
                            min-width:18rem;
                            margin-left:5rem;
                        }
                        button,
                        a{
                            &::before,
                            &::after{
                                @include tablet{
                                    width: 3.2rem;
                                }
                                @include desktopMin{
                                    width: 3.2rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.myNotificationWrap {
    margin-top: 3rem;
    .borderTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @include maxtablet{
            display: block;
        }
        .infoWarp {
            font-size: 1.8rem;
            color: #000000;
            @media (max-width: 820px){
                font-size: 1.6rem;
            }
        }
        .searchBoxWarp {
            .searchTextBox {
                border-left: 1px solid #DEDEDE;
            }
            @include maxtablet{
                margin-top: 1.5rem;
            }
        }
    }
    .borderList {
        margin-top: 2rem;
        @include maxtablet{
            margin-top: 3rem;
        }
        .item {
            border-top: 1px solid #DEDEDE;
            border-bottom: 1px solid #DEDEDE;
            a {
                display: block;
                padding: 2rem 0;
                .itemTop {
                    .type {
                        font-size: 1.4rem;
                        font-weight: 600;
                        color: #05141F;
                    }
                    .date {
                        font-size: 1.4rem;
                        font-weight: 400;
                        color: #9EA1A2;
                    }
                }
                .itemTitle {
                    margin-top: 1.2rem;
                    font-size: 1.8rem;
                    font-weight: 600;
                    line-height: 2.6rem;
                    color: #000000;
                    @include maxtablet{
                        font-size: 1.6rem;
                        line-height: 2.4rem;
                    }
                }
            }
        }
        :not(:first-child) {
            border-top: 0;
        }
        .noItem {
            padding: 4.3rem 0;
            border-top: 1px solid #DEDEDE;
            border-bottom: 1px solid #DEDEDE;
            font-size: 1.8rem;
            font-weight: 600;
            color: #9EA1A2;
            @include maxtablet{
                padding: 5.2rem 0;
                font-size: 1.6rem;
            }
        }
    }
}

.myNotificationViewWrap {
    margin-top: 3rem;
    .borderView {
        dl {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 2.2rem 0;
            border-top: 1px solid #DEDEDE;
            border-bottom: 1px solid #DEDEDE;
            @include maxtablet{
                display: block;
                padding: 2rem 0;
            }
            .itemName {
                width: 15.5rem;
                font-size: 1.6rem;
                line-height: 2.4rem;
                color: #676767;
                @include maxtablet{
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                }
            }
            .itemValue {
                display: flex;
                justify-content: flex-start;
                width: calc(100% - 15.5rem);
                font-size: 1.6rem;
                line-height: 2.4rem;
                color: #000000;
                @include maxtablet{
                    display: block;
                    width: 100%;
                    margin-top: 1rem;
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                }
                &::before {
                    content: "";
                    display: block;
                    width: 0.1rem;
                    height: 1.5rem;
                    margin-right: 2rem;
                    background-color: #DEDEDE;
                    @include maxtablet{
                        display: none;
                    }
                }
                
            }
        }
        :not(:first-child) {
            border-top: 0;
        }
    }
    .contentsWrap {
        margin-top: 4rem;
        .title {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 2.6rem;
            color: #000000;
            @include maxtablet{
                font-size: 1.6rem;
                line-height: 2.4rem;
            }
        }
        .imgWrap {
            margin-top: 2rem;
            @include maxtablet{
                margin-top: 1.5rem;
            }
            img {
                width: 100%;
            }
        }
        .text {
            margin-top: 2rem;
            font-size: 1.6rem;
            font-weight: 400;
            line-height: 2.4rem;
            color: #000000;
            @include maxtablet{
                font-size: 1.4rem;
                line-height: 2.2rem;
            }
        }    
    }
}

.mailBodyContents {
    table {
        width: 100% !important;
        tr {
            td+td+td{
                width: calc(100% - 138px) !important;
            }
        }
    }
}
.mailBodyContents > table > tbody > tr > td {
    font-size: 1.8rem !important;
    @include maxtablet{
        font-size: 1.6rem !important;
    }
}

.myCouponTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
    @include maxtablet{
        display: block;
        margin-top: 0rem;
    }
    .couponNumInput {
        width: calc(100% - 16rem);
        padding-right: 3rem;
        @include maxtablet{
            width: 100%;
            padding-right: 0;
        }
        input {
            width: 100%;
            height: 5rem;
            padding: 0 2rem;
            border: 1px solid #DEDEDE;
            font-size: 1.6rem;
            font-weight: 400;
            @include maxtablet{
                height: 4.5rem;
                padding: 0 1.5rem;
                font-size: 1.4rem;
            }
        }
    }
    .couponBtn {
        @include maxtablet{
            margin-top: 2rem;
        }
    }
}

// .myCouponListWrap {
//     margin-top: 4rem;
//     .boardTop {
//         .infoWarp {
//             font-size: 2rem;
//             font-weight: 600;
//             @include maxtablet{
//                 font-size: 1.8rem;
//             }
//         }
//     }
//     .boardList {
//         margin-top: 3rem;
//         @include maxtablet{
//             margin-top: 2rem;
//         }
//         .list {
//             .item {
//                 border: 1px solid #DEDEDE;
//                 border-radius: 0.6rem;
//                 padding: 3rem;
//                 margin-bottom: 1rem;
//                 @include maxtablet{
//                     padding: 2rem;
//                 }
//                 .itemTop {
//                     display: flex;
//                     justify-content: space-between;
//                     align-items: flex-start;
//                     width: 100%;
//                     padding-bottom: 3rem;
//                     border-bottom: 1px dashed #DEDEDE;
//                     @include maxtablet{
//                         display: block;
//                         padding-bottom: 2rem;
//                     }
//                     .info {
//                         width: calc(100% - 17rem);
//                         @include maxtablet{
//                             width: 100%;
//                         }
//                         .benefits {
//                             font-size: 2.2rem;
//                             font-weight: 600;
//                             line-height: 3rem;
//                             @include maxtablet{
//                                 font-size: 2rem;
//                             }
//                         }
//                         .title {
//                             margin-top: 0.5rem;
//                             font-size: 1.6rem;
//                             font-weight: 600;
//                             color: #676767;
//                             line-height: 2.4rem;
//                             @include maxtablet{
//                                 margin-top: 2rem;
//                             }
//                         }
//                     }
//                     .date {
//                         width: 17rem;
//                         font-size: 1.4rem;
//                         font-weight: 400;
//                         text-align: right;
//                         @include maxtablet{
//                             margin-top: 0.5rem;
//                             text-align: left;
//                         }
//                     }
                    
//                 }
//                 .itemBottom {
//                     padding-top: 3rem;
//                     @include maxtablet{
//                         padding-top: 2rem;
//                     }
//                     span {
//                         margin-right: 0.5rem;
//                         font-size: 1.4rem;
//                         font-weight: 400;
//                         color: #000000;
//                         line-height: 2.2rem;
//                     }
//                 }
//             }
//             .noItem {
//                 display: flex;
//                 justify-content: center;
//                 align-items: center;
//                 width: 100%;
//                 height: 18rem;
//                 padding: 2rem;
//                 border: 1px solid #DEDEDE;
//                 border-radius: 0.6rem;
//                 font-size: 2rem;
//                 font-weight: 600;
//                 color: #9EA1A2;
//                 text-align: center;
//             }
//         }
//         .couponInfo {
//             margin-top: 2rem;
//             ul {
//                 li {
//                     display: flex;
//                     align-items: center;
//                     margin-bottom: 0.5rem;
//                     font-size: 1.4rem;
//                     font-weight: 400;
//                     color: #676767;
//                     line-height: 2.2rem;
//                     &::before {
//                         content: "∙";
//                         margin-right: 0.5rem;
//                     }
//                 }
//             }
//         }
//     }
// }


.myCouponListWrap {
    margin-top: 4rem;
    .boardTop {
        .infoWarp {
            font-size: 2rem;
            font-weight: 600;
            @include maxtablet{
                font-size: 1.8rem;
            }
        }
    }
    .boardList {
        margin-top: 3rem;
        @include maxtablet{
            margin-top: 2rem;
        }
        .list {
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #DEDEDE;
                border-radius: 0.6rem;
                margin-bottom: 1rem;
                @media (max-width: 900px){
                    display: block;
                }
                .itemTop {
                    width: calc(100% - 16rem);
                    padding: 3rem 2rem 3rem 3rem;
                    border-right: 1px dashed #DEDEDE;
                    @media (max-width: 900px){
                        width: 100%;
                        border-right: 0;
                        border-bottom: 1px dashed #DEDEDE;
                    }
                    @include maxtablet{
                        padding: 2rem;
                    }
                    .info {
                        .benefits {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: flex-start;
                            align-items: center;
                            @include maxtablet{
                                display: block;
                            }
                            .benefitsItem{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .badge {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    padding: 0.5rem 0.8rem;
                                    font-size: 1.4rem;
                                    font-weight: 600;
                                    border: 1px solid #DEDEDE;
                                    @include maxtablet{
                                        font-size: 1.1rem;
                                    }
                                }
                                .value {
                                    padding-left: 1rem;
                                    font-size: 2.4rem;
                                    font-weight: 600;
                                    color: #000000;
                                    @include maxtablet{
                                        font-size: 2rem;
                                    }
                                    .info {
                                        margin-top: 0.5rem;
                                        font-size: 1.6rem;
                                        font-weight: 400;
                                        color: #676767;
                                        line-height: 2.4rem;
                                    }
                                }
                                &:first-child{
                                    margin-right: 2.5rem;
                                    @include maxtablet{
                                        margin-bottom: 1.5rem;
                                        margin-right: 2.5rem;
                                    }
                                }
                            }
                        }
                        .cost {
                            margin-top: 1.5rem;
                            font-size: 1.6rem;
                            font-weight: 600;
                        }
                        .title {
                            margin-top: 2.5rem;
                            font-size: 1.6rem;
                            font-weight: 600;
                            color: #676767;
                            line-height: 2.4rem;
                        }
                    }
                    
                    .target {
                        margin-top: 1rem;
                        span {
                            margin-right: 0.5rem;
                            font-size: 1.6rem;
                            font-weight: 400;
                            color: #676767;
                            line-height: 2.2rem;
                        }
                    }
                }
                .itemBottom {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 16rem;
                    @media (max-width: 900px){
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        width: 100%;
                        padding: 2rem;
                    }
                    .date {
                        margin-top: 1rem;
                        font-size: 1.4rem;
                        color: #676767;
                        @media (max-width: 900px){
                            margin-top: 0.5rem;
                            margin-left: 1rem;
                        }
                    }
                    .cost {
                        width: auto;
                        margin-top: 1.5rem;
                        font-size: 1.6rem;
                        font-weight: 400;
                        @media (max-width: 900px){
                            
                            display: block;
                            width: 100%;
                        }
                    }
                }
            }
            .noItem {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 18rem;
                padding: 2rem;
                border: 1px solid #DEDEDE;
                border-radius: 0.6rem;
                font-size: 2rem;
                font-weight: 600;
                color: #9EA1A2;
                text-align: center;
            }
        }
        .couponInfo {
            margin-top: 2rem;
            .title {
                font-size: 1.8rem;
                font-weight: 600;
                color: #000000;
                @media(max-width: 768px){
                    font-size: 1.6rem;
                }
            }
            ul {
                margin-top: 1rem;
                li {
                    display: flex;
                    align-items: center;
                    margin-bottom: 0.5rem;
                    font-size: 1.4rem;
                    font-weight: 400;
                    color: #676767;
                    line-height: 2.2rem;
                    &::before {
                        content: "∙";
                        margin-right: 0.5rem;
                    }
                }
            }
        }
    }
}

.reviewWarp{
    margin-top:0rem;
    margin-top:5rem;
    
    @include tablet{
        width: 100%;
    }
    @media (max-width: 1200px){
        border: none;
        margin-top:5rem;
        padding-top: 0;
    }
    dl.important{
        dt{
            display: flex;
            align-items: center;
            &::after{
                content:"";
                width:0.5rem;
                height:0.5rem;
                display: block;
                border-radius: 50%;
                margin-left:0.4rem;
                background-color: #EA0029;
                margin-top:-0.7rem;
                @include tablet{
                    margin-left:0.4rem;
                    margin-top:-1rem;
                }
            }
        }
    }
    dl{
        
        @include tablet{
            flex-wrap: nowrap;
            
        }
        dt{
            position: relative;
            width:100%;
            font-size: 1.4rem;
            font-weight: 600;
            color:#676767;
            @include tablet{
                max-width:14rem;
            }
            @include desktopMin{
                font-size: 1.6rem;
            }
        }
        dd{
            width:100%;
            display:flex; 
            margin-top:1rem;
            @include tablet{
                margin-top:0;
            }
            input[type=text]{
                display:flex; 
                width:100%;
                align-items: center;
                padding-left:1.7rem;
                border: 1px solid #DEDEDE;
                height:4.5rem;
                font-size: 1.4rem;
                color:#000;
                
                @include desktopMin{
                    font-size: 1.6rem;
                    height:5rem;
                }
            }
            >div{
                width:100%;
                display:flex;
                flex-wrap: wrap;
                justify-content: space-between;
                 @include tablet{
                    flex-wrap: nowrap;
                } 
                input[type=text]{
                    width:calc(100%/3);
                    font-size: 1.4rem;
                    @include desktopMin{
                        font-size: 1.6rem;
                    }
                }
                input[type=text] + input[type=text]{
                    margin-left:1rem;
                }
                input[type=text] + select{
                    width:100%;
                    margin-top:1rem; 
                    @include tablet{
                        margin-top:0;
                        margin-left:1rem;
                        width:calc(100%/3);
                    }
                }
               span{
                height:5rem;
                display:flex; 
                align-items: center;
                padding-left:0.8rem;
                padding-right:0.8rem;
               }
              
            }
            
            textarea{
                width:initial;
                border:1px solid #DEDEDE;
                outline: 0 none;
                border-radius: 0;
                padding:1.5rem 1.7rem;
                font-size: 1.4rem;
                line-height: 2.2rem;
                @include desktopMin{
                    font-size: 1.6rem;
                    line-height: 2.4rem;
                }
            }
            
        }
        dd.contentsWrap {
            margin-top: 1.5rem;
            flex-direction: column;
            .wordCounter {
                justify-content: flex-end;
                margin-top: 1rem;
                font-size: 1.4rem;
                color: #676767;
                text-align: right;
            }
        }
    }

}

.comp_mypage_user_guide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media(max-width: 768px){
        display: block;
    }
    .content {
        width: calc(100% - 220px);
        padding-right: 6.4rem;
        @media(max-width: 768px){
            width: 100%;
            padding-right: 0;
        }
        .text {
            font-size: 1.6rem;
            font-weight: 400;
            line-height: 2.4rem;
            @media(max-width: 768px){
                font-size: 1.4rem;
                line-height: 2.2rem;
            }
        }
        a {
            display: block;
            margin-top: 1.5rem;
            font-size: 1.4rem;
            font-weight: 400;
            color: #676767;
            
        }
    }
    .image_area {
        width: 22rem;
        @media(max-width: 768px){
            width: 100%;
            margin-top: 3rem;
        }
        img {
            width: 100%;
            border-radius: 0.6rem;
        }
    }
}