html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.full-size {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
}

.inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-top: 150%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.inner-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
    z-index: 100;
}

.inner-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
    z-index: 100;
}

.bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.logo-1 {
    position: absolute;
    left: 12.03%;
    top: 3.54%;
    width: 76.72%;
    height: auto;
}

.title-1 {
    position: absolute;
    left: 12.66%;
    top: 83.65%;
    width: 45%;
    height: auto;
}

.text-1 {
    position: absolute;
    left: 12.81%;
    top: 91.88%;
    width: 35.31%;
    height: auto;
}

.text-2 {
    position: absolute;
    left: 7.5%;
    top: 84.69%;
    width: 27.97%;
    height: auto;
}

.title-2 {
    position: absolute;
    left: 57.5%;
    top: 84.48%;
    width: 34.84%;
    height: auto;
}

.logo-2 {
    position: absolute;
    left: 12.81%;
    top: 10.6%;
    width: 75.94%;
    height: auto;
}

.text-3 {
    position: absolute;
    left: 7.5%;
    top: 84.69%;
    width: 27.97%;
    height: auto;
}

.logo-3 {
    position: absolute;
    left: 12.03%;
    top: 11.88%;
    width: 76.72%;
    height: auto;
}

.title-3 {
    position: absolute;
    left: 57.5%;
    top: 84.48%;
    width: 34.84%;
    height: auto;
}

.img-1, .img-1-bg {
    position: absolute;
    left: 5.63%;
    top: 50%;
    width: 89.22%;
    height: auto;
    transform: translateY(-50%);
}

.img-2, .img-3, .img-2-bg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: auto;
    transform: translate(-50%, 0);
}

.title {
    position: absolute;
    left: 58.75%;
    top: 5.21%;
    width: 32.34%;
    height: 3.13%;
}

.logo-ccc {
    position: absolute;
    left: 8.28%;
    top: 3.96%;
    width: 25.31%;
    height: 5.73%;
}

.text {
    position: absolute;
    left: 32.34%;
    top: 78.02%;
    width: 35.31%;
    height: 4.58%;
}

.cta {
    position: absolute;
    left: 27.03%;
    top: 86.46%;
    width: 46.09%;
    height: 8.96%;
}

.logo {
    position: absolute;
    left: 8.28%;
    top: 64.06%;
    width: 83.44%;
    height: 9.38%;
}

/* ---------------------------------- */

.border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}

.border-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}


@media (min-aspect-ratio: 10/15) {
    .ad-container {
        width: 66.6666vh;
        height: 100vh;
        left: 50%;
        transform: translateX(-50%);
    }
}