.main-wrapper {
    width: 800px;
    max-width: 100%;
    position: relative;
    background: url(bg.jpg) no-repeat center / cover;
    display: flex;
    padding: 60px 30px 33px;
    box-sizing: border-box;
    align-items: flex-end;
    border-radius: 2px;
    overflow: hidden;
}

.left {
    width: 46.2%;
}

.left img {
    display: block;
    width: 50%;
}

.transition-start {
    opacity: 1;
    transform: translateX(0);
    transition: .3s cubic-bezier(0.82, 0.01, 0.74, 0.99);
}

.full .transition-start {
    opacity: 0;
    transform: translateX(-180px);
}

.txt1 {
    margin-bottom: 30px;
    transition-delay: .04s
}

.txt2 {
    margin-bottom: 40px;
    transition-delay: .07s
}

.txt3 {
    transition-delay: .1s
}

.txt4 {
    margin: 10px 0 0 85px;
    transition-delay: .13s
}

img {
    max-width: 100%;
}

.right {
    width: 53.8%;
}

.video-wrapper2 {
    position: absolute;
    width: 408px;
    height: 230px;
    right: 20px;
    bottom: 160px;
    max-width: calc(53.8% - 20px);
    transition: .3s cubic-bezier(0.79, 0.15, 0.19, 0.9);
    background-color: #000;
    outline: none;
    z-index: 2;
}

.full .video-wrapper2 {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.cta-btn:hover {
    opacity: .95;
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .1);
    transition: .1s;
}

.sm-list {
    position: absolute;
    top: 0;
    right: 20px;
}

.sm-list li {
    display: inline-block;
}

.sm-list li a {
    display: inline-block;
    width: 22px;
    height: 17px;
    background: no-repeat center / contain;
    margin: 0 5px;
    transition: .15s;
}

.sm-list li a:hover {
    transform: scale(1.1);
}

.sm-list li a.fb {
    background-image: url(fb.png)
}

.sm-list li a.tw {
    background-image: url(tw.png)
}

.sm-list li a.ins {
    background-image: url(ins.png)
}

.sm-list li a.yt {
    background-image: url(yt.png)
}

video {
    width: 100%;
    height: 100%;
    display: block;
}

#close-btn {
    display: none
}

.cta-btn {
    display: inline-block;
    max-width: 200px;
}

@media (max-width: 560px) {
    .main-wrapper.full {
        height: 200px;
    }

    .cta-btn {
        display: inline-block;
        max-width: 60%;
    }

    .main-wrapper.full .video-wrapper2 {
        transition: 0s;
    }

    .main-wrapper:not(.full) {
        position: fixed;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(bg-m.jpg);
        display: block;
        border-radius: 0;
        background-position: right bottom;
        background-size: 130%;
        background-color: #1C3768
    }

    .sm-list {
        width: 100%;
        right: 0;
        margin: 0;
        padding: 7vw 40px;
        box-sizing: border-box;
        text-align: right;
        background: url(bg-top.jpg) no-repeat right center / cover
    }

    .sm-list li a {
        height: 15px;
        margin: 0 7px;
    }

    .main-wrapper:not(.full) .left {
        width: 65%;
        margin-top: 20px;
    }

    .main-wrapper:not(.full) .cta-btn img {
        width: 80%;
    }

    .main-wrapper:not(.full) .right {
        width: 100%;
    }

    .main-wrapper:not(.full) .txt1 {
        margin-bottom: 20px
    }

    .main-wrapper:not(.full) .txt2 {
        max-width: 67%;
        margin-bottom: 25px
    }

    .main-wrapper:not(.full) .txt3 {
        position: absolute;
        top: 20px;
        max-width: 23vw;
        z-index: 1
    }

    .main-wrapper:not(.full) .txt4 {
        position: absolute;
        top: calc(20px + 5vw);
        max-width: 27vw;
        margin-left: 17vw;
        z-index: 1
    }

    .main-wrapper:not(.full) .video-wrapper2 {
        width: calc(100% + 60px);
        height: auto;
        top: 0;
        left: 0;
        max-width: calc(100% + 60px);
        position: relative;
        margin: 0 -30px;
        margin-top: calc(5px + 2vw)
    }

    .full .screen {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
    }

    .main-wrapper:not(.full) #close-btn {
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        background: url(close.png) no-repeat center / 50%
    }
}

@media (max-width: 375px) {
    .main-wrapper:not(.full) {
        background-size: 110%;
    }

    .cta-btn {
        max-width: 55%;
    }

    .main-wrapper:not(.full) .left {
        width: 65%;
        margin-top: 15px;
    }

    .main-wrapper:not(.full) .txt1 {
        margin-bottom: 20px
    }

    .main-wrapper:not(.full) .txt2 {
        max-width: 62%;
        margin-bottom: 20px
    }

    .main-wrapper:not(.full) .video-wrapper2 {
        margin-top: calc(5px + 1vw)
    }

    .sm-list li a {
        width: 19px;
        height: 14px;
        margin: 0 5px;
    }
}

@media (max-width: 325px) {
    .main-wrapper.full {
        height: 184px;
    }
}