body, html {
        font-family: 'Roboto', sans-serif;
        margin:0;
        padding:0;
        height:100%;
    }
    .wrapper {
        width:860px;
        margin:0 auto;
        padding-top:20px;
    }
    .header {
        overflow: hidden;
        margin-bottom:20px;
    }
    .header .title {
        display: inline-block;
        max-width:566px;
        width:100%;
        height:37px;
        color:#fff;
        text-indent: -9999px;
        text-transform:uppercase;
        background: url('../image/bgr_title.png') left top no-repeat;
        background-size: 100%;
        margin-top:7px;
    }
    .logo {
        display: inline-block;
        float:right;
        width:253px;
        height:51px;
    }
    .video {
        position: relative;
        width: 748px;
        height: 422px;
        margin:10px auto 0;        
    }
    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;        
    }
    .desc {
        color:#e7eae8;
        font-size:20px;
        text-align: center;
    }
    .desc strong,
    .desc b {
        color:#ffb400;
        font-weight: 700;
    }
    .btn {
        display: block;
        width:80%;
        max-width:650px;
        color:#0a0a0b;
        text-indent: -9999px;
        text-decoration: none;
        text-transform: uppercase;
        margin:0 auto;
    }

    /* Type one */
    body.type_1 {
        background:#000 url('../image/bgr_1.jpg') center top no-repeat;
    }
    body.type_1 .logo{
        background: url('../image/logo_white.png') left top no-repeat;
    }
    body.type_1 .btn {
        background: url('../image/btn_1.png') center top no-repeat;
        height:105px;
        background-size: 100%;
    }

    /* Type two */
    body.type_2 {
        background:#000 url('../image/bgr_2.jpg') center top no-repeat;
    }
    body.type_2 .logo{
        background: url('../image/logo.png') left top no-repeat;
    }
    body.type_2 .btn {
        background: url('../image/btn_2.png') center top no-repeat;
        height:140px;
        background-size: 100%;
    }

    /* Type three */
    body.type_3 {
        background:#000 url('../image/bgr_3.jpg') center top no-repeat;
    }
    body.type_3 .logo{
        background: url('../image/logo_white.png') left top no-repeat;
    }
    body.type_3 .btn {
        background: url('../image/btn_3.png') center top no-repeat;
        height:100px;
        background-size: 100%;
    }

    /* Type four */
    body.type_4 {
        background:#000 url('../image/bgr_4.jpg') center top no-repeat;
    }
    body.type_4 .logo{
        background: url('../image/logo_white.png') left top no-repeat;
    }
    body.type_4 .btn {
        background: url('../image/btn_1.png') center top no-repeat;
        height:105px;
        background-size: 100%;
    }

@media screen and (max-width : 700px) {
    
    .header .title {
        margin-bottom:0;
        width:210px;
        height:30px;
    }
    body::before {
        content:'';
        display: block;
        position: absolute;
        left:0;
        right:0;
        z-index: -1;
    }
    body.type_1 {
        background-image:url('../image/bgr_1_mob.jpg');
        box-shadow: inset 0px 0px 115px 35px rgba(0,0,0,0.75);
    }
    body.type_1::before {
        width: 310px;
        height: 238px;
        bottom:0;
        margin:0 auto;
        background: url('../image/bgr_elem1_mob.png') left bottom no-repeat;
        background-size: 100%;
    }
    body.type_1 .logo {
        background: url('../image/logo_white_mob.png') left top no-repeat;
    }
    body.type_2 {
        background-image:url('../image/bgr_2_mob.jpg');
        box-shadow: inset 0px 0px 115px 44px rgba(0,0,0,0.55);
    }
    body.type_2::before {
        max-width: 375px;
        width:100%;
        height: 227px;
        bottom:0;
        left: auto;
        background: url('../image/bgr_elem2_mob.png') left bottom no-repeat;
        background-size: 100%;
    }    
    body.type_2 .logo {
        background: url('../image/logo_red_mob.png') left top no-repeat;
    }
    body.type_3 {
        background-image:url('../image/bgr_3_mob.jpg');
        box-shadow: inset 0px 0px 115px 35px rgba(0,0,0,0.75);
    }
    body.type_3::before {
        width:291px;
        height:241px;
        bottom:0;
        background: url('../image/bgr_elem3_mob.png') left bottom no-repeat;
        background-size: 100%;
    }    
    body.type_3 .logo {
        background: url('../image/logo_colored_mob.png') left top no-repeat;
    }
    body.type_4 {
        background-image:url('../image/bgr_4_mob.jpg');
    }
    body.type_4::before {
        width:308px;
        height:233px;
        bottom:0;
        left:auto;
        background: url('../image/bgr_elem4_mob.png') left bottom no-repeat;
        background-size: 100%;
    }        
    body.type_4 .logo {
        background: url('../image/logo_white_mob.png') left top no-repeat;
    }
    body[class^="type"] .logo {
        width:120px;
        height:24px;
        background-size:118px 24px;
        margin:0 auto;
    }
    .desc {
        font-size:12px;
    }
}

@media screen and (max-width : 812px) {
    .wrapper {
        width:100%;
    }
    .header {
        text-align: center;
    }
    .logo {
        display: block;
        float:none;
        margin:20px auto 0;
    }
    .video {
        width:auto;
        height:0;
        margin:10px 10px 0;
        padding-bottom: 56.25%;
    }
    .desc {
        padding:0 20px;
    }
}