body {
    padding:0;
    margin:0;
}
#cmmSwipeWrap{
    overflow:hidden;
}
.swiper {
    width:60%;
    height:600px;
    float:right;
}
.slide-current{
    color:yellow;
}
.swiper .swiper-slide {
    height:600px !important;
    transition:0.2s;
}
.swiper .swiper-slide.active {

}
.swiper-slide img{
    max-height:600px;
}
.swiper-3d .swiper-slide{
    position:relative;
    bottom:0;
}
#cmmSwipeContent{
    background:rgba(65,121,133,.65);
    position:absolute;
    z-index:2;
    height:500px;
    top:220px;
    width:42%;
    right:3.5%;
    display:block;
}
#cmmLeftWrap h1{
    color:rgb(12,62,119);
    font-size:44px;
    margin-bottom:.5em;
    line-height:1.2em;
    font-family:"Roboto";
    font-weight:400;
}
#cmmLeftWrap{
    width:45%;
    margin:0 5%;
    position:absolute;
    top:320px;
    padding:50px 0;
    z-index:3;
}
#cmmLeftWrap a,
.cmmButton,
#cmmSwipeContent button {
    font-family:"Roboto";
    font-weight:400;
    font-size:15px;
    color: #fff;
    text-transform: uppercase;
    padding: 6px 25px;
    border: 0;
    margin: 7px;
    cursor: pointer;
    text-decoration:none;
    transition:all .5s;
    display:inline-block;
    border:1px solid transparent;
    background:#417984;
    color:#fff
}
#cmmSwipeContent #cmmButtonWrap{
    text-align:center;
    bottom: 50px;
    width:100%;
    position: absolute;
}
#cmmLeftWrap a:hover,
.cmmButton:hover,
#cmmSwipeContent button:hover,
#cmmSwipeContent button.cmmActive{
    border:1px solid #417984;
    background:#fff;
    color:#417984
}
#cmmLeftWrap .cmmButton{
    font-size:12px;
    font-weight:600;
    padding:10px 50px;
}
#cmmLeftWrap a.cmmButton::after,
div.cmmContent a::after{
    content:">";
    width:1em;
    height:1em;
    display:block;
    top:2px;
    right:-.5em;
    position:absolute;
    transition:all .5s;
    opacity:0;
    color:#fff;
}
#cmmLeftWrap a.cmmButton:hover::after,
div.cmmContent.cmmActive a:hover::after{
    right:-1.5em;
    position:absolute;
    opacity:1;
    color:#0c3e77;
}
.swiper-slide{
    opacity:0!important;
}
.swiper-slide-visible.swiper-slide-active{
    opacity:1!important;
}
div.cmmContent {
    padding: 0 50px;
    top:160px;
    position:absolute;
    z-index:999;
    font-family:"Roboto";
    font-weight:200;
    max-height:0;
}
div.cmmContent p{
    color: #fff;
    font-size: 32px!important;
    line-height:1.2em!important;
    margin-bottom:1em;
}
div.cmmContent a{
    color: #fff;
    font-size: 22px;
    text-decoration:none;
    margin-top:1em;
    display:inline-block;
    cursor: pointer;
}
div.cmmContent a::before{
    background: rgba(255,255,255,.3);
    position:absolute;
    height:1px;
    width:0;
    display:block;
    content:"";
    margin-top:calc(-1.1em - 2px);
    transition:all .5s;
    transition-delay: .4s;
}
div.cmmContent.cmmActive a::before{
    width:80px;
}
div.cmmContent a::after{
    color: #fff;
    font-size: 22px;
}
div.cmmContent{
    z-index:5;
    height:0!important;
    max-height:0!important;
    opacity:0;
    transition:opacity 0,transform 1.2s;
    transform: translate(0,20px);
}
div.cmmContent.cmmActive{
    z-index:6;
    height:auto!important;
    max-height:auto!important;
    opacity:1;
    transition:opacity 1.2s,transform 1.2s;
    transform: translate(0px,0);
}
div.cmmContent a{
    opacity:0;
    transition:all .3s,transform 0;
    transform: translate(0,20px);
}
div.cmmContent.cmmActive a{
    opacity:1;
    transition:opacity 1.2s,transform 1.2s,color .3s;
    transform: translate(0px,0);
    z-index:5;
    position: relative;
}
div.cmmContent.cmmActive a:hover{
    z-index:5;
    color:#0c3e77;
    text-decoration:underline;
}

@media (max-width: 1199px) {
    .swiper {
        width:80%;
    }
}
@media (max-width: 999px) {
    .swiper {
        width:100%;
    }
    .swiper-wrapper{
        opacity:.5;
    }
    #cmmLeftWrap {
        width:calc(100% - 50px);
        margin:0;
        padding:20px!important;
        position: absolute;
        top: 0;
        padding: 0;
        z-index: 3;
    }
    #cmmSwipeContent {
        background: rgba(65,121,133,.6);
        height: 600px;
        position: absolute;
        z-index: 2;
        height: 50vh;
        top: auto;
        bottom: 0;
        width: 100%;
        right: 0;
        display: block;
    }
}
@media (max-width: 700px) {
    #cmmLeftWrap h1{
        font-size:34px
    }
    div.cmmContent p{
        font-size:26px!important
    }
    div.cmmContent a{
        font-size:18px
    }
}
@media (max-width: 600px) {
    #cmmButtonWrap {
        padding:0 25px;
        text-align:center;
    }
    #cmmSwipeContent button{
        width:100%;
        margin:7px 0;
    }
    #cmmLeftWrap h1{
        font-size:28px
    }
    #cmmSwipeContent{
        height:55vh;
    }
    div.cmmContent p{
        font-size:24px!important
    }
    div.cmmContent a{
        font-size:16px
    }
}
@media (max-width: 400px) {
    #cmmSwipeContent{
        height:60vh;
    }
    #cmmLeftWrap h1{
        font-size:22px
    }
    div.cmmContent p{
        font-size:22px!important
    }
    div.cmmContent a{
        font-size:14px
    }
}