cc-scrollview img{
    max-width: 350px;
    width: 100%;
}
cc-scrollview p{
    font-size: 2.2rem;
    padding-bottom: 4rem;
}
cc-scrollview .title{
    font-size: 4.5rem;
    padding-bottom: 4rem;
}
@media(max-width: 991px){
    cc-scrollview img{
        margin: 30px 0;
        width: 60%;
    }
    cc-scrollview p{
        font-size: 2rem;
        padding-bottom: 1.3rem;
    }
    cc-scrollview .title{
        font-size: 2.5rem;
        font-weight: bold;
        padding-bottom: 2rem;
    }
}
.box {
    width: 100%;
}
cc-scrollview {
    position: relative;
    display: block;
    width: 100%;
}
cc-scrolltext {
    display: block;
}
@media(min-width: 991px) {
    cc-scrollview:not(.slide) .box {
        top: 0;
        position: sticky;
    }
    cc-scrollview .box {
        padding: 100px 128.5px;
    }
    cc-scrollview.slide .box {
        padding: 0 128.5px;
    }
    cc-scrollview:not(.slide) .collapse:not(.opaque),
    cc-scrollview.slide cc-scrollimage.collapse {
        display: none;
        opacity: 0;
        transition: all 0.3s;
    }
    cc-scrollview:not(.slide) .collapse.opaque,
    cc-scrollview.slide cc-scrolltext.collapse {
        opacity: 0.4;
        transition: opacity 0.3s;
    }
    cc-scrollimage {
        position: absolute !important;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }
    cc-scrollview:not(.slide) .box {
        height: 100vh;
        min-height: 1100px;
    }
    cc-scrollview.slide.animate_active.sticky cc-scrollimage {
        position: fixed !important;
        top: 50%;
        width: auto;
        text-align: center;
    }
    cc-scrollview.slide .box {
        min-height: 850px;
        padding: 100px 128.5px !important;
    }
    cc-scrollview.slide:not(.animate_active) cc-scrolltext {
        opacity: 0.4;
    }
    cc-scrollview.slide cc-scrollimage{
        display: inline-block;
        position: relative;
    }
    cc-scrollview.slide.sticky-bottom cc-scrollimage {
        bottom: 270px;
        position: absolute !important;
        left: calc(50% + 75px);
        top: auto !important;
    }
    cc-scrolltext {
        height: auto;
    }
    cc-scrollview:not(.slide) .float_box {
        top: 50%;
        position: relative !important;
        transform: translateY(-50%);
    }
    cc-scrollview.img-top cc-scrollimage {
        position: absolute;
        top: 0;
        right: 0;
    }
    cc-scrollview:not(.animate_active).sticky-top cc-scrollimage  {
        position: absolute !important;
        top: 50px;
        left: calc(50% + 80px);
        width:auto;
    }
    cc-scrollview.slide .float_box {
        top: 0;
        transform: unset;
    }
    cc-scrollview.slide cc-scrolltext {
        display: block;
        height: 100vh;
    }
    cc-scrollview.slide {
        height: auto !important;
        position: relative;
    }
    cc-scrollview.slide .box {
        height: auto !important;
    }
    cc-scrollview.sticky-top.slide cc-scrollimage {
        position: absolute !important;
        top: 150px;
        left: calc(50% + 80px);
    }
    cc-scrollview.sticky.slide cc-scrollimage {
        position: fixed !important;
        top: 150px;
    }
    cc-scrollview.slide {
        position: relative !important;
    }
    cc-scrollview.slide cc-scrolltext > div {
        top: 50%;
        transform: translateY(-50%);
        position: relative;
    }
    cc-scrollview .float_box {
        position: relative;
    }
    cc-scrollview.slide.animate_active.sticky .box {
        position: sticky !important;
        top: 0 !important;
        height: auto;
    }
    cc-scrollview.slide cc-scrollimage {
        transform: translateY(0);
    }
    cc-scrollimage, cc-scrolltext {
        width: 50%;
    }
    cc-scrollimage {
        left: 50%;
    }
}
@media screen and (min-width: 991px) and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    cc-scrollview.sticky:not(.slide) .box {
        left: 50%;
        transform: translate(-50%, 0);
        position: fixed;
        height: 100vh;
    }
    cc-scrollview.sticky-bottom:not(.slide) .box {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: auto;
        bottom: 0;
    }
}
@media screen and (max-width: 990px) {
    cc-scrollview,
    cc-scrolltext {
        height: auto !important;
    }
    cc-scrollimage {
        display: block !important;
        margin: auto;
    }
}
cc-scrollview .box {
    max-width: 1360px;
    position: relative;
}
cc-scrollview.slide .float_box {
    height: auto;
}
cc-scrollimage {
    position: relative;
}
cc-scrollnum {
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -25px;
}
cc-scrollview:not(.sticky) cc-scrollnum {
    display: none;
}
cc-scrollview.slide {
    height: auto !important;
}
cc-scrollview.slide cc-scrolltext {
    display: block;
}
cc-scrollview .col-100 div {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
}
cc-scrollview.slide cc-scrollimage {
    width: 350px;
}
cc-scrollview.slide cc-scrolltext {
    height: 100vh;
}
cc-scrolltext.auto-height {
    height: auto !important;
}
cc-scrolltext.auto-height div {
    top: 0 !important;
    transform: translateY(0) !important;
}