/*********************************/
/***** Product Page (Master) *****/
/*********************************/

.p-section-container {
    width: 100%;
}

.p-section-placeholder {
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

.p-container-height {
    height: auto;
}

.p-info-section {
    background-size: cover;
    background-color: white;
    background-position: center;
}

.p-vibease-bg-b {
    /*background-image: url('../Image/Product/Vibease/Section-B-2.jpg');*/
    background-image: none;
}

.p-vibease-placeholder-b {
    margin-top: 0;
    margin-left: 0;
    height: 100%;
}

.p-section-title {
    color: black;
    /*font-weight: bold;*/
    font-size: 2rem;
    /*letter-spacing: 2px;*/
    margin-bottom: 30px;
}

.p-section-subtitle {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.p-section-desc {
    margin-bottom: 40px;
    font-size: 0.9375rem;
}

.p-vibease-carousel-indicators-section-b li {
    border: none !important;
}

.p-carousel-vibease-static-img {
    position: absolute;
    top: 53%;
    left: 60%;
    width: 200px;
}

/******** Mobile Setting *********/
@media (max-width: 1199px) {
    .p-padding-mobile {
        padding: 0;
    }

    .p-margin-mobile {
        margin: 0;
    }

    .p-vibease-bg-b {
        /*background-image: url('../Image/Product/Vibease/Section-B-2.jpg');*/
        background-image: none;
    }

    .p-container-height {
        height: 750px;
    }

    .p-vibease-placeholder-b {
        height: 100%;
        margin-top: 0;
        margin-left: 0;
        text-align: center;
    }

    .p-carousel-vibease-section-b-placeholder {
        margin: 0;
        height: 100%;
    }

    .p-section-title {
        font-size: 1.4rem;
        letter-spacing: 0;
        font-weight: normal;
        margin: 0 30px 30px 30px;
    }

    .p-vibease-title-section-b {
        z-index: 10;
        margin-top: 9%;
        position: absolute;
        width: 100%;
        left: 0;
        margin-left: 0;
        padding: 0 20px;
    }

    .p-carousel-inner-vibease-section-b {
        height: 100%;
    }

    @supports not (background-image: url('../Image/Home/graphics/phone1_mobile.webp?version=2.0')) {
        .p-carousel-vibease-section-b-bg-1 {
            background-image: url('../Image/Home/graphics/phone1_mobile.jpg?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        .p-carousel-vibease-section-b-bg-2 {
            background-image: url('../Image/Home/graphics/phone2_mobile.jpg?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        .p-carousel-vibease-section-b-bg-3 {
            background-image: url('../Image/Home/graphics/phone3_mobile.jpg?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
    }
    @supports (background-image: url('../Image/Home/graphics/phone1_mobile.webp?version=2.0')) {
        .p-carousel-vibease-section-b-bg-1 {
            background-image: url('../Image/Home/graphics/phone1_mobile.webp?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        .p-carousel-vibease-section-b-bg-2 {
            background-image: url('../Image/Home/graphics/phone2_mobile.webp?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        .p-carousel-vibease-section-b-bg-3 {
            background-image: url('../Image/Home/graphics/phone3_mobile.webp?version=2.0');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
    }

    .p-section-subtitle {
        margin-bottom: 15px;
    }

    .p-section-desc {
        font-size: 0.87rem;
    }

    .p-vibease-carousel-indicators-section-b {
        display: none;
    }

    .p-section-carousel-prev {
        width: 50%;
        justify-content: flex-start;
    }

    .p-section-carousel-next {
        width: 50%;
        justify-content: flex-end;
    }

    .p-carousel-vibease-section-b {
        height: 100%;
        min-height: 170px;
        padding: 125px 50px;
        margin-bottom: 10px;
    }

    .p-section-carousel-next-i {
        opacity: 0.3;
        margin-right: 8px;
        margin-bottom: 83px;
        background-image: url('../Image/Home/right-c.svg');
    }

    .p-section-carousel-prev-i {
        opacity: 0.3;
        margin-left: 8px;
        margin-bottom: 83px;
        background-image: url('../Image/Home/left-c.svg');
    }

    .p-carousel-prev-section-b {
        width: 30%;
    }

    .p-carousel-next-section-b {
        width: 30%;
    }

    .p-carousel-prev-section-b-i {
        margin-bottom: 385px;
    }

    .p-carousel-next-section-b-i {
        margin-bottom: 385px;
    }

    .p-vibease-btn-placeholder-section-b {
        left: 50%;
        bottom: 57%;
        position: absolute;
        margin-left: -80px;
    }

    .p-carousel-vibease-static-img {
        position: absolute;
        top: initial;
        left: 5%;
        width: 200px;
        bottom: 20px;
    }

    @media (min-width: 760px) {
        .p-vibease-bg-b {
            /*background-image: url('../Image/Product/Vibease/Section-B-2.jpg');*/
            background-image: none;
        }

        .p-container-height {
            height: 400px;
        }

        .p-carousel-vibease-section-b {
            margin-bottom: 0;
            min-height: 160px;
            height: 100%;
            padding: 125px 350px 0 50px;
        }

        .p-vibease-placeholder-b {
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            text-align: center;
        }

        .p-section-title {
            font-size: 1.36rem;
            margin-left: 0;
            margin-right: 0;
        }

        .p-vibease-title-section-b {
            margin-top: 5%;
            width: 100%;
            text-align: center;
            left: 0;
        }

        .p-carousel-vibease-section-b-bg-1 {
            background-image: url('../Image/Home/graphics/phone1_desktop.jpeg?version=2.0');
            background-position: right -100px center;
        }

        .p-carousel-vibease-section-b-bg-2 {
            background-image: url('../Image/Home/graphics/phone2_desktop.jpg?version=2.0');
            background-position: right -100px center;
        }

        .p-carousel-vibease-section-b-bg-3 {
            background-image: url('../Image/Home/graphics/phone3_desktop.jpeg?version=2.0');
            background-position: right -100px center;
        }

        .p-section-carousel-prev {
            left: -13%;
        }

        .p-section-carousel-next {
            right: -13%;
        }

        .p-section-carousel-prev-i {
            margin-bottom: 95px;
        }

        .p-section-carousel-next-i {
            margin-bottom: 95px;
        }

        .p-carousel-prev-section-b {
            left: 0;
            width: 10%;
        }

        .p-carousel-prev-section-b-i {
            margin-left: 20px;
            margin-bottom: 130px;
        }

        .p-carousel-next-section-b {
            right: 0;
            width: 50%;
        }

        .p-carousel-next-section-b-i {
            margin-left: 45px;
            margin-right: auto;
            margin-bottom: 130px;
        }

        .p-vibease-btn-placeholder-section-b {
            left: 41%;
            bottom: 18%;
            margin-left: -160px;
        }

        .p-carousel-vibease-static-img {
            position: absolute;
            top: 51%;
            left: 70%;
            width: 130px;
            bottom: initial;
        }
    }

    @media (min-width: 1020px) {
        .p-carousel-vibease-section-b {
            padding: 155px 480px 0 60px;
        }

        .p-container-height {
            height: 450px;
        }

        .p-vibease-placeholder-b {
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            text-align: center;
        }

        .p-section-carousel-prev {
            left: 0;
        }

        .p-section-carousel-next {
            right: 0;
        }

        .p-product-carousel-prev {
            width: 8%;
        }

        .p-carousel-prev-i {
            margin-left: 10px;
        }

        .p-product-carousel-next {
            width: 8%;
        }

        .p-carousel-next-i {
            margin-right: 10px;
        }

        .p-vibease-btn-placeholder-section-b {
            left: 38%;
        }

        .p-carousel-vibease-static-img {
            position: absolute;
            top: 53%;
            left: 66%;
            width: 160px;
            bottom: initial;
        }
    }
}

@media (max-width: 320px) {
    .p-vibease-btn-placeholder-section-b {
        bottom: 55%;
    }
}


/******** Web Setting *********/
@media (min-width: 1200px) {
    .p-carousel-vibease-section-b-placeholder {
        height: 100%;
    }

    .p-vibease-title-section-b {
        z-index: 20;
        margin-top: 3.5%;
        position: absolute;
        width: 100%;
        text-align: center;
    }

    #section-A-CS .carousel-control-prev, #section-A-CS .carousel-control-next, #section-B-CS .carousel-control-prev, #section-B-CS .carousel-control-next {
        visibility: hidden;
        display: none;
    }

    .p-carousel-inner-vibease-section-b {
        top: 0;
        height: 100%;
        position: absolute;
    }

    .p-carousel-vibease-section-b-bg-1 {
        height: 100%;
        background-image: url('../Image/Home/graphics/phone1_desktop.jpeg?version=2.0');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .p-carousel-vibease-section-b-bg-2 {
        height: 100%;
        background-image: url('../Image/Home/graphics/phone2_desktop.jpg?version=2.0');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .p-carousel-vibease-section-b-bg-3 {
        height: 100%;
        background-image: url('../Image/Home/graphics/phone3_desktop.jpeg?version=2.0');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .p-carousel-vibease-section-b-item {
        display: none;
    }

    .p-vibease-carousel-indicators-section-b {
        margin: 0;
        bottom: 0;
        height: 100%;
        display: block;
        padding-top: 8%;
        padding-left: 15%;
        position: absolute;
        background-image: url('../Image/Product/gradient-white-s.png');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .p-vibease-carousel-item {
        color: darkgray;
        cursor: pointer;
        margin: 0 !important;
        width: 500px !important;
        height: auto !important;
        text-indent: initial !important;
        background-color: transparent !important;
    }

    .p-vibease-btn-placeholder-section-b {
        z-index: 20;
        left: 15%;
        bottom: 12%;
        position: absolute;
    }

    .carousel-indicators .active {
        color: black;
    }

    .p-carousel-vibease-static-img {
        position: absolute;
        top: 55%;
        left: 59%;
        width: initial;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .p-vibease-placeholder-b {
        /*margin-top: 1.5%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-section-title {
        font-size: calc(2rem*0.8);
        margin-bottom: 25px;
    }

    .p-vibease-title-section-b {
        margin-top: 3%;
    }

    .p-section-subtitle {
        font-size: calc(1.125rem*0.8);
        margin-bottom: 5px;
    }

    .p-section-desc {
        font-size: calc(0.9375rem*0.8);
        margin-bottom: 30px;
    }

    .p-vibease-carousel-indicators-section-b {
        padding-top: 8%;
    }

    .p-vibease-btn-placeholder-section-b {
        bottom: 6%;
    }

    .p-carousel-vibease-static-img {
        top: 60%;
        left: 62%;
        width: 150px;
    }
}

@media (min-width: 1300px) and (max-width: 1499px) {
    .p-vibease-placeholder-b {
        /*margin-top: 3%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-section-title {
        font-size: calc(2rem*0.85);
        margin-bottom: 25px;
    }

    .p-vibease-title-section-b {
        margin-top: 3%;
    }

    .p-section-subtitle {
        font-size: calc(1.125rem*0.85);
        margin-bottom: 5px;
    }

    .p-section-desc {
        font-size: calc(0.9375rem*0.85);
        margin-bottom: 30px;
    }

    .p-vibease-carousel-indicators-section-b {
        padding-top: 8%;
    }

    .p-vibease-btn-placeholder-section-b {
        bottom: 5%;
    }

    .p-carousel-vibease-static-img {
        top: 62%;
        left: 63%;
        width: 150px;
    }
}

@media (min-width: 1500px) and (max-width: 1599px) {
    .p-vibease-placeholder-b {
        /*margin-top: 4%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-section-title {
        font-size: 1.35rem;
        margin-bottom: 25px;
        margin-top: 3.5%;
    }

    .p-section-subtitle {
        font-size: 0.97rem;
        margin-bottom: 5px;
    }

    .p-section-desc {
        font-size: 0.84rem;
        margin-bottom: 30px;
    }

    .p-vibease-carousel-indicators-section-b {
        padding-top: 9%;
    }

    .p-vibease-btn-placeholder-section-b {
        bottom: 10%;
    }

    .p-carousel-vibease-static-img {
        top: 64%;
        left: 63%;
        width: 160px;
    }
}

@media (min-width: 1600px) and (max-width: 1699px) {
    .p-vibease-placeholder-b {
        /*margin-top: 3%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-section-title {
        font-size: calc(2rem*0.95);
    }

    .p-vibease-title-section-b {
        margin-top: 2.5%;
    }

    .p-section-subtitle {
        font-size: calc(1.125rem*0.95);
    }

    .p-section-desc {
        font-size: calc(0.9375rem*0.95);
    }

    .p-vibease-carousel-indicators-section-b {
        padding-top: 7%;
    }

    .p-vibease-btn-placeholder-section-b {
        bottom: 9%;
    }

    .p-carousel-vibease-static-img {
        top: 63%;
        left: 63%;
        width: 180px;
    }
}

@media (min-width: 1700px) and (max-width: 1799px) {
    .p-vibease-placeholder-b {
        /*margin-top: 3.5%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-vibease-btn-placeholder-section-b {
        bottom: 7%;
    }

    .p-carousel-vibease-static-img {
        top: 61%;
        left: 62%;
        width: 200px;
    }
}

@media (min-width: 1800px) and (max-width: 1899px) {
    .p-vibease-placeholder-b {
        /*margin-top: 4%;*/
        margin-top: 0;
        margin-left: 0;
        height: 100%;
    }

    .p-vibease-title-section-b {
        margin-top: 3.5%;
    }

    .p-vibease-carousel-indicators-section-b {
        padding-top: 7%;
    }

    .p-carousel-vibease-static-img {
        top: 58%;
        left: 61%;
        width: 230px;
    }
}


@media (max-width: 767px) {
    .p-vibease-bg-m-2 .p-vibease-btn-placeholder-section-b {
        bottom: 47%;
    }

}