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

.contentWarp{
//결재페이지 
    .productView{
        display:block;
        width:100%;
        padding-left:2rem;
        padding-right:2rem;
       
        @include tablet{
            display:flex;
            justify-content: space-between;
        }
        @include desktopMin{
            width:100%;
        }
        @include desktopMax{
            width:120rem;
            display:flex;
            justify-content: space-between;
             padding-left:0rem;
            padding-right:0rem;
        }
        .productLeft{
            width:100%;
             
            
            @include tablet{
                width:50%;
                margin-right:2rem;
            }
            @include desktopMax{
                width:60rem;
            }
            .productImg{
                border-radius:0.6rem ;
                overflow: hidden;
                position: sticky;
                top:7.5rem;
                .productSwiper{
                    width:100%;
                     height:auto;
                    
                    @include desktopMax{
                       width:100%;
                    
                    }
                    .swiper-slide{
                        position: relative;
                        background-color: #666;
                        img{width:100%; height:100%;}
                        .productSmallVideo{
                            width:100%;
                            height:auto;
                            overflow: hidden;
                            position: relative;
                            
                            img {position: absolute; top:0; left:0;}
                            video {
                                position: absolute;
                                width: 100%;
                                aspect-ratio: 1/1;
                                height:auto;
                                position: relative;
                                left: 0;
                                top: 0;
                                opacity: 1;
                                

                            }
                        }
                        .movie_info {
                            position: absolute;
                            top: 1rem;
                            right: 1rem;
                            font-size: 1.4rem;
                            color: #ffffff;
                            text-shadow: 1px 1px 1px #333;
                            z-index: 1;
                        }
                    }
                    .swiper-pagination{
                        bottom:2rem;
                        @include desktopMax{
                          bottom:2.5rem;  
                        }
                        span{
                           width:5.6rem;
                           height:0.4rem; 
                           border-radius: 0;
                           background-color: #fff;
                        }
                    }
                }
                @include desktopMax{
                    width:60rem;
                    height:60rem;
                }
            }
        }

        .productRight{
            width:100%;
            margin-top:3rem;
            @include tablet{
                width:50%;
                margin-left:2rem;
                margin-top:0;
            }
            @include desktopMax{
                width:50rem;
                margin-top:0;
            }
            .musicBtn{
                margin-top:4rem;
            }
            .optionWarp{
                .producTitle{
                    span{
                        color:#676767;
                        font-size:1.5rem; 
                        font-weight: 400;
                        @include desktopMax{
                            font-size:1.4rem; 
                            line-height: initial;
                        }
                    }
                    .title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        h1{
                            width: calc(100% - 3rem);
                            padding-right: 2rem;
                            color:#000;
                            font-size:3rem; 
                            font-weight: 600;
                            
                                @include desktopMax{
                                font-size:4.5rem;  
                            }
                        }
                        a {
                            display: block;
                            width: 3rem;
                            height: 3rem;
                            background-image: url("/kr/assets/images/common/icon-wishlist-d.svg");
                            background-repeat: no-repeat;
                            background-size: contain;
                            &.active {
                                background-image: url("/kr/assets/images/common/icon-wishlist-s.svg");
                            }
                        }
                    }
                    
                    >p{
                        color:#000;
                        font-size:1.6rem; 
                        font-weight: 400;
                        margin-top:2.3rem;
                        line-height: 2.4rem;
                    }
                }
                .producInfoWarp{
                    margin-top:5rem;
                    h2{
                        color:#000;
                        font-size:1.6rem; 
                        font-weight: 600;
                            @include desktopMin{
                            font-size:1.8rem;  
                        }
                    }
                    .producInfoLogOut{
                        margin-top:2rem; 
                        >p{
                            color:#000;
                            font-size:1.4rem;
                            line-height:2.2rem;
                                @include desktopMin{
                                font-size:1.6rem;  
                                line-height:2.4rem;
                            }
                        }
                        >span{
                            display: block;
                            color:#676767;
                            font-size:1.4rem; 
                            margin-top:1.5rem;
                                line-height:2.2rem;
                                @include desktopMin{
                                font-size:1.6rem;
                                line-height:2.4rem;  
                            }
                        }
                    }
                    .producInfoLogIn{
                        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{
                                            display:flex; 
                                            justify-content: flex-end;
                                            margin-top:3rem;
                                            font-weight: bold;
                                            font-size: 2rem;
                                        }
                                    }
                                    &:hover{
                                        border:1px solid #000;
                                    }
                                }
                            }
                            li+li{
                                margin-top:1rem;
                            }
                        }
                    }
                    .termsOK{
                        margin-top:3rem;
                        >a{
                            display:flex;
                            font-size:1.4rem;
                            color:#676767;
                            span{
                                border-bottom:1px solid #676767;
                            }
                            &::after{
                                content: "";
                                displaY:block;
                                width:0.6rem;
                                margin-left:0.8rem;
                                background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center right;
                            }
                        }
                        >label{
                            display: flex;
                            margin-top:2rem;
                            align-items: flex-start;
                            cursor: pointer;
                            span{
                                font-size:1.4rem;
                                margin-left:1rem;
                                line-height: 2.2rem;
                                display: block;
                            }
                        }
                    }
                    .noStreaming {
                        margin-top: 2rem;
                        padding: 3rem 2rem;
                        background-color: #F3F3F3;
                        border-radius: 0.6rem;
                        P {
                            font-size: 1.6rem;
                            line-height: 2.4rem;
                            font-weight: 600;
                            color: #000000;
                        }
                        span {
                            margin-top: 1rem;
                            font-size: 1.6rem;
                            font-weight: 400;
                            line-height: 2.4rem;
                            color: #676767;

                        }
                    }
                }
                .packageOption {
                    margin-top:5rem;
                    h2{
                        color:#000;
                        font-size:1.6rem; 
                        font-weight: 600;
                        @include desktopMin{
                            font-size:1.8rem;  
                        }
                    }
                    .optionList{
                        margin-top:2rem;
                        padding: 2.5rem;
                        border: 1px solid #DEDEDE;
                        border-radius: 0.6rem;
                        
                        @include maxtablet{
                            padding: 2rem;
                        }
                        .productSmallVideo{
                            min-width:9rem;
                            height:9rem;
                            overflow: hidden;
                            position: relative;
                            @include desktopMin{
                                max-width:100%;
                            }
                            @include desktopMax{
                                min-width:9rem;
                                max-width:9rem;
                            }
                            img {
                                position: absolute; 
                                top:0; 
                                left:0;
                                width: 9rem;
                                height: 9rem;
                                border-radius: 0.6rem;
                            }
                            video {
                                position: absolute;
                                height:9rem;
                                position: relative;
                                left: 0;
                                top: 0;
                                opacity: 1;
                                border-radius: 0.6rem;
                            }
                        }
                        .optionItem {
                            displaY:flex; 
                            width:100%; 
                            height:9rem;
                            overflow: hidden;
                            position: relative;
                            margin-top: 2.5rem;
                            .optionText {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                width:100%;
                                padding-left: 2.5rem;
                                @include maxtablet{
                                    padding-left: 2rem;
                                }
                                p{
                                    width:100%;
                                    span,
                                    strong{
                                        displaY:block; 
                                        width:100%;
                                        font-size:1.4rem ;
                                        
                                        line-height: 1.4;
                                        white-space: normal;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                        @include desktopMax{
                                            font-size:1.6rem ;
                                            line-height: 2rem;
                                        }
                                    }
                                    strong{font-weight: 600;}
                                    span{font-weight: 400;}
                                    strong + span{margin-top:1rem; }
                                }
                            }
                            &:first-child {
                                margin-top: 0;
                            }
                            @include maxtablet{
                                margin-top: 2rem;
                                &:first-child {
                                    margin-top: 0;
                                }
                            }
                            img {
                                width: 9rem;
                                height: 9rem;
                                border-radius: 0.6rem;
                            }
                        }
                    }
                }
                .producOption{
                    margin-top:5rem;
                    h2{
                        color:#000;
                        font-size:1.6rem; 
                        font-weight: 600;
                            @include desktopMin{
                            font-size:1.8rem;  
                        }
                    }
                    .optionList{
                        overflow: auto;
                        max-height: 642px;
                        margin-top:2rem;
                        @include maxtablet{
                            max-height: 44.5rem;
                        }
                        .checkBtn{
                            label{
                                displaY:flex; 
                                width:100%; 
                                height:12rem;
                                overflow: hidden;
                                cursor: pointer; 
                                position: relative; 
                                @include maxtablet{
                                    height:8rem;
                                }
                                p {
                                    img {
                                        width: 12rem;
                                        height: 12rem;
                                        @include maxtablet{
                                            width: 8rem;
                                            height: 8rem;
                                        }
                                    }
                                }
                            }
                            .productSmallVideo{
                                min-width:12rem;
                                height:12rem;
                                overflow: hidden;
                                position: relative;
                                @include desktopMin{
                                    max-width:100%;
                                }
                                @include desktopMax{
                                        min-width:12rem;
                                    max-width:12rem;
                                }
                                img {position: absolute; top:0; left:0;}
                                video {
                                    position: absolute;
                                    height:12rem;
                                    position: relative;
                                    left: 0;
                                    top: 0;
                                    opacity: 1;
                                }
                            }
                            
                            input[type=checkbox]{
                                visibility: hidden;
                                position: absolute;
                                &:checked + label{
                                    background-color: #05141F;
                                    border:1px solid #05141F;
                                    &::before{
                                        content: "";
                                        position: absolute;
                                        right:1.5rem;
                                        top:50%;
                                        transform: translate(-50%, -50%);
                                        display:block;
                                        width:1.5rem;
                                        height:1.5rem;
                                        background-image: url("/kr/assets/images/common/icon_select.svg");
                                        background-size: contain;
                                        background-repeat: no-repeat;
                                        @include desktopMax{
                                            width:2rem;
                                            height:2rem;
                                            right:2rem;
                                        }
                                    }
                                    div{
                                        p{
                                            span,
                                            strong{color:#fff;}
                                        }
                                    }
                                }
                            }
                            &:hover{
                                label{
                                    border:1px solid #000; 
                                }
                            }
                            
                            .optionText{
                                display:flex; 
                                flex-wrap: wrap;
                                align-items: center;
                                padding-left:2rem;
                                width:100%;
                                @include desktopMax{
                                    padding-left:3rem;
                                }

                                p{
                                    width:100%;
                                    span,
                                    strong{
                                        displaY:block; 
                                        width:100%;
                                        font-size:1.4rem ;
                                        width:75%;
                                        line-height: 1.4;
                                        white-space: normal;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                        @include desktopMax{
                                                font-size:1.4rem ;
                                        }
                                    }
                                    strong{font-weight: 600;}
                                    span{font-weight: 400;}
                                    strong + span{
                                        margin-top:1rem; 
                                        @include maxtablet{
                                            margin-top:.5rem; 
                                        }
                                    }
                                }
                            }
                        }
                        .disabledBtn{
                            label{
                                border:1px solid #DEDEDE;   
                                span,
                                strong{color:#9EA1A2;} 
                                p{
                                    opacity: 0.5;
                                }
                            }
                            &:hover{
                                label{
                                    border:1px solid #DEDEDE; 
                                }
                            }
                        }
                        .checkBtn + .checkBtn{margin-top:1rem;}
                        
                    }
                }
                .priceOption{
                    margin-top:5rem;
                    h2{
                        color:#000;
                        font-size:1.6rem; 
                        font-weight: 600;
                        @include desktopMax{
                            font-size:1.8rem;  
                        }
                    }
                    .priceList{
                        margin-top:2rem;
                        .radioBtn{
                            label{
                                displaY:flex;
                                justify-content: space-between; 
                                align-items: center;
                                width:100%; 
                                padding:2.5rem;
                                height:9rem;
                                overflow: hidden;
                                cursor: pointer; 
                                position: relative; 
                                border-radius: 0.6rem;  
                                border:1px solid #DEDEDE; 
                                span{
                                    font-size:1.4rem; 
                                    font-weight: 400;
                                    color:#000;
                                    @include desktopMax{
                                        font-size:1.6rem;
                                    }
                                }
                                strong{
                                    font-size:1.7rem; 
                                    font-weight: 600;
                                    text-align: right;
                                    color:#000;
                                    @include desktopMax{
                                        font-size:2rem;
                                    }
                                    span {
                                        display: block;
                                        margin-top: 0.5rem;
                                        font-size: 1.4rem;
                                        text-align: right;
                                    }
                                }
                            }
                            input[type=radio]{
                                visibility: hidden;
                                position: absolute;
                                &:checked + label{
                                    background-color: #05141F;
                                    border:1px solid #05141F;
                                    span,
                                    strong{color:#fff;}
                                    span {
                                        .title {
                                            color:#fff;
                                        }
                                        .info {
                                            color:#fff;
                                        }
                                    }
                                }
                            }
                            &:hover{
                                label{
                                    border:1px solid #000; 
                                }
                            }
                            &.coupon {
                                background-color: #F3F3F3;
                                border-radius: 0.6rem;
                                label {
                                    .title {
                                        font-size: 1.6rem;
                                        font-weight: 600;
                                        color: #000000;
                                        &::after {
                                            content: "";
                                            display: inline-block;
                                            width:1.4rem;
                                            height:1.3rem;
                                            background-image: url(/kr/assets/images/common/coupon_star.svg);
                                            background-repeat: no-repeat;
                                            background-size: contain;
                                            background-position: center right;
                                        }
                                    }
                                    .info {
                                        margin-top: 0.5rem;
                                        font-size: 1.6rem;
                                        font-weight: 400;
                                        color: #676767;
                                    }
                                }
                            }
                        }
                        .disabledBtn{
                            label{
                                border:1px solid #DEDEDE;   
                                span,
                                strong{color:#9EA1A2;}
                                span {
                                    .title {
                                        color:#9EA1A2 !important;
                                    }
                                    .info {
                                        color:#9EA1A2 !important;
                                    }
                                }
                            }
                            &:hover{
                                label{
                                    border:1px solid #DEDEDE; 
                                }
                            }
                        }
                        .radioBtn + .radioBtn{margin-top:1rem;}
                    }
                }

                .priceTotal{
                    margin-top:4rem;
                    .total{
                        display:block;
                        @include desktopMax{
                            display:flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                        dt{
                            font-size:1.4rem;
                            font-weight: 600;
                            color:#666;
                            @include desktopMax{
                                font-size:1.6rem;
                            }
                        }
                        dd{
                            font-size:3rem;
                            font-weight: 600;
                            color:#000;
                            margin-top:1.5rem;
                            @include desktopMax{
                                margin-top:0;
                            }
                        }
                    }
                    .paymentButton{
                        display:block; 
                        margin-top:3rem;
                        width:100%;
                        max-width:initial;
                        @include tablet{display:flex; }
                        @include desktopMax{
                            display:flex;
                            justify-content: space-between;
                            margin-top:3.2rem;

                        }
                        .cartBtn,
                        .PurchaseBtn{width:100%;}
                        .cartBtn{
                            margin-right:0rem;
                            @include tablet{
                                margin-right:0.5rem;
                            }
                            @include desktopMax{
                                margin-right:0.5rem;
                            }
                        }
                        .PurchaseBtn{ 
                            margin-left:0;
                                @include tablet{
                                margin-left:0.5rem;
                            }
                            @include desktopMax{
                                margin-left:0.5rem;
                            }
                        }
                        button+button{
                            margin-top:0.8rem;
                            @include tablet{margin-top:0rem;}
                            @include desktopMax{
                                margin-top: 0;
                            }
                        }
                    }
                    
                }

            }
        }
         
    }
}

.pdpListBtn{
    width: 100%;
    height: 7.4rem;
    background-color: #F3F3F3;
    padding: 0 2rem;
    @include tablet {
        height: 10rem;
        padding: 0;
    }
    .inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 7.4rem;
        font-size: 1.4rem;
        font-weight: 600;
        color: #000000;
        @include tablet {
            max-width: 120rem;
            margin: 0 auto;
            height: 10rem;
            font-size: 1.6rem;
            color: #000000;
        }
        @media (max-width: 1240px){
            padding: 0 2rem;
        }
        a {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
                margin-left: 1rem;
                color: #000000;
            }
            &:hover {
                text-decoration: underline;
            }
        }
    }
}