/**
 * Introduction
 */

.home .ws-introduction {padding:3vw 0;}
.ws-introduction-inner {min-height:60vh; padding-bottom:5vw;}
.ws-introduction-col {width:40%;}
.ws-introduction-col-1 {width:60%;}
.ws-introduction-col.content .no-margin-bottom {margin-bottom:5px!important;}

.has-video .ws-introduction-col.content {padding-right:100px;}

/* logo */
.ws-introduction__logo .logo {width:170px; height:170px;}
.has-video .ws-introduction__logo {margin-left:-20px; margin-bottom:10px;}
.has-video .ws-introduction__logo .logo {width:150px; height:150px;}

/* video frame */
.ws-introduction__video-link {display:block;}
.ws-introduction__video-bg {position:relative; border-radius:5px; overflow:hidden;}
.ws-introduction__image-intro-bg {position:relative; border-radius:5px; overflow:hidden;}
.ws-introduction__video-bg:before {
    content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2;
     opacity:.35; transition:all .3s ease;
}
.ws-introduction__image-intro-bg:before {
    content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2;
    background:#141F3F; opacity:.35; transition:all .3s ease;
}
.ws-introduction__video-link:hover .ws-introduction__video-bg:before {opacity:.45;}
.ws-introduction__video.frame-rounded-white-border .ws-introduction__video-link {
    border-radius:25px; overflow:hidden; padding:20px 20px 40px;
}

/* play button */
.ws-introduction__video-bg button {
    position:absolute; top:50%; left:50%; z-index:3; font-size:23px;
    transform:translate(-50%,-50%); border-radius:50%;
    width:70px; height:70px; background:#E60032; color:#fff;
}
.ws-introduction__video-bg button i {position:relative; left:.1em; top:.1em;}
.ws-introduction__video-link:hover button {background:#fff; color:#141F3F;}


/* Introduction > Scroll down */
.ws-introduction__scroll-down button {
    width:55px; height:39px; top: -100px; position:relative; background:none;
    animation-name: ws-bounce;
    animation-timing-function: ease;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.ws-introduction__scroll-down button:before, .ws-introduction__scroll-down button:after {
    content:'\e94a'; font-family:"icomoon"; font-size:25px;
    position:absolute; left:50%; transform:translateX(-50%);
    transition:all .3s ease;
}
.ws-introduction__scroll-down button:before {top:0; opacity:.3;}
.ws-introduction__scroll-down button:after {bottom:0; z-index:2;}

.ws-introduction__scroll-down button:hover:before {opacity:1; z-index:3; top:20%;}
.ws-introduction__scroll-down button:hover:after {opacity:.3; bottom:-40%;}


@keyframes ws-bounce {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-20px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-5px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}


/* animation */
.ws-introduction-col.animation {mix-blend-mode:multiply;}
.ws-introduction__animation {width:100%; max-width:470px;}
.ws-introduction__animation video,
.ws-introduction__animation img {width:100%; height:auto;}

/* responsive */
@media only screen and (max-width:1500px){
    .has-video .ws-introduction-col.content {padding-right:70px;}

    .ws-introduction__scroll-down button {height:33px;}
    .ws-introduction__scroll-down button:before, .ws-introduction__scroll-down button:after {font-size:20px;}

    /* logo */
    .ws-introduction__logo .logo {width:150px; height:150px;}
    .has-video .ws-introduction__logo {margin-left:-22px; margin-bottom:0;}
    .has-video .ws-introduction__logo .logo {width:130px; height:130px;}
}
@media only screen and (max-width:1280px){
    .has-video .ws-introduction-col.content {padding-right:40px;}

    /* play button */
    .ws-introduction__video-bg button {width:55px; height:55px; font-size:17px;}

    /* logo */
    .ws-introduction__logo .logo {width:120px; height:120px;}
    .ws-introduction__logo, .has-video .ws-introduction__logo {margin-left:-22px;}
    .has-video .ws-introduction__logo .logo {width:100px; height:100px;}

    /* video frame */
    .ws-introduction__video.frame-rounded-white-border .ws-introduction__video-link {
        border-radius:15px; padding:20px 20px 30px;
    }

    /* Introduction > Scroll down */
    .ws-introduction__scroll-down button {width:45px; height:29px;}
    .ws-introduction__scroll-down button:before, .ws-introduction__scroll-down button:after {font-size:18px;}
}
@media only screen and (max-width:1024px){
    .home .ws-introduction {padding:0;}
    .ws-introduction-inner {min-height:auto; padding-bottom:20px;}
    .has-video .ws-introduction-col.content {padding-right:18px;}

    /* animation */
    .ws-introduction__animation {max-width:370px;}

    /* play button */
    .ws-introduction__video-bg button {width:45px; height:45px; font-size:14px;}

    /* video frame */
    .ws-introduction__video.frame-rounded-white-border .ws-introduction__video-link {
        border-radius:15px; padding:15px 15px 22px;
    }
}
@media only screen and (max-width:768px){
    /* video frame */
    .ws-introduction__video.frame-rounded-white-border .ws-introduction__video-link {
        border-radius:10px; padding:10px 10px 15px;
    }
}
@media only screen and (max-width:767px){
    .has-video .ws-introduction-col.content {padding-right:0; margin-bottom:30px;}
    .ws-introduction-col {width:100%;}
    .ws-introduction-col-1 {width:100%;}

    /* Introduction > Scroll down */
    .ws-introduction__scroll-down button {width:45px; height:19px;}
    .ws-introduction__scroll-down button:before, .ws-introduction__scroll-down button:after {font-size:12px;}

    /* animation */
    .ws-introduction__animation {max-width:280px; padding-top:20px;}
}
@media only screen and (max-width:480px){
    /* logo */
    .ws-introduction__logo .logo,
    .has-video .ws-introduction__logo .logo {width:95px; height:95px;}

    /* video frame */
    .ws-introduction__video.frame-rounded-white-border .ws-introduction__video-link {
        border-radius:10px; padding:10px 10px 13px;
    }
}