/*------------------------------------
        	$General
------------------------------------*/
.button-sets {
    text-align: center;
}
.button-sets button {
    margin: 10px 10px;
}
.button-sets .btn-default {
    border-radius: 0;
    /*26:1920-18:768*/
    font-size: calc(0.6944444444444444vw + 12.666666666666666px);
    /*60:1920-40:768*/
    height: calc(1.7361111111111112vw + 26.666666666666668px);
    /*200:1920-140:768*/
    width: calc(5.208333333333334vw + 100px);
    line-height: 1;
    outline: none !important;
}
.button-sets .rl-btn-fill {
    background-color: #82be0f;
    border: 2px solid #82be0f;
    color: #fff;
}
    .button-sets .rl-btn-fill:hover {
        background-color: transparent;
        border: 2px solid #82be0f;
        color: #82be0f;
    }
.button-sets .rl-btn-border {
    background-color: transparent;
    border: 2px solid #82be0f;
    color: #82be0f;
}
    .button-sets .rl-btn-border:hover {
        background-color: #82be0f;
        border: 2px solid #82be0f;
        color: #fff;
    }
    
.rl-banner .button-sets .rl-btn-fill:hover {
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.rl-btn-for-bg-flower:hover{
    background-color: rgba(0,0,0,0.7);
    border: 2px solid #82be0f;
}

.rl-text-shadow-for-bg-flower{
    text-shadow: 3px 3px 8px rgba(0,0,0,0.2);
}

/* .rl-btn-more{
    font-size: 1.3rem;
    padding: 11px 80px;
} */

.rl-btn-more .fa-angle-right{
    font-size: 28px;
}

/*------------------------------------
        	$Banner
------------------------------------*/
.rl-banner {
    background-image: none;
    height: 41.67vw;
    min-height: 680px;
    overflow: visible;
    display: flex;
}

.rl-home-banner-wrapper {
    background-color: #191919;
}

.rl-home-banner-wrapper .scroll-button {
    border: none;
    border-radius: 100%;
    background-color: #82be0f;
    /*48-40*/
    width: calc(0.6944444444444444vw + 34.666666666666664px);
    height: calc(0.6944444444444444vw + 34.666666666666664px);
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    bottom: -24px;
    right: 0;
    left: 0;
    z-index: 1;
    outline: none;
}
.rl-home-banner-wrapper .scroll-button:hover {
    background-color: #577d0f;
}
.rl-home-banner-wrapper .scroll-button .fa-angle-down { 
    color: #fff;
    /*32-48*/ 
    font-size: calc(0.3472222222222222vw + 25.333333333333332px);
}

.rl-banner-text {
    font-size: calc( 26.4px + 0.5vw);
    font-weight: 300;
    color: #e8e8e8;
    /*30/1920*/
    margin-bottom: 1vw;
}

.btn-play{
    margin: 0 auto;
    width: calc(5.382131324004305vw + 16.66307857911733px);
    height: calc(5.382131324004305vw + 16.66307857911733px);
}

.rl-banner .button-sets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.rl-banner .button-sets .play-button {
    color: #fff;
    font-size: calc( 23.2px + 0.25vw );
}
.rl-banner .button-sets .play-text {
    font-size: calc(0.5vw + 18.4px); /*28:1920-20:320*/
    margin: 0 20px;
}

/*------------------------------------
    $What Can iClone Do For You
------------------------------------*/
.rl-title { font-size: calc(1.575vw + 24px); /*1920:60, 320:30*/ line-height: 1.2; }
.rl-title-main {
    color: rgba(0, 0, 0, 0.8);
    font-size: calc(2.1875vw + 23px); /*1920:65, 320:30*/
    padding-bottom: 40px;
}

.rl-content-body {
    height: 100%;
}
.rl-content-body .rl-title,
.rl-content-body .rl-text-desc { color: #fff; }
.rl-content-body .rl-number {     
    font-size: 300px;
    font-style: italic;
}

.rl-title-banner {
    background-image: url(../../images/default/Banner_title.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.rl-content-banner { 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* cursor: pointer; */
    height: 23.4375vw; /*450/1920*/
    min-height: 450px;
    max-height: 700px;
}

.rl-content-banner > div{ 
    height: 100%;
}

.rl-content-banner .rl-text-desc { font-weight: 400; }
.rl-text-home-feature{ font-size: calc(0.43750000000000006vw + 16.6px); text-shadow: 3px 3px 5px rgba(0,0,0,0.3);}


.rl-content-banner.digitalHuman { background-image: url(../../images/default/Banner_CC_Digital-Human02.jpg); }
.rl-content-banner.generatedPhoto { background-image: url(../../images/default/Banner_CC_GeneratedPhoto.jpg); }
.rl-content-banner.animation { background-image: url(../../images/default/Banner_CC_for_Animation.jpg); }
.rl-content-banner.gameDesign { background-image: url(../../images/default/Banner_CC_for_Game.jpg); }
.rl-content-banner.dazTransformer { background-image: url(../../images/default/Banner_CC_for_Daz.jpg); }
.rl-content-banner.zbrushPipeline { background-image: url(../../images/default/Banner_CC_for_ZBrush.jpg); }

.rl-content-banner.rendering { background-image: url(../../images/default/Banner_CC_for_Visualization.jpg); }

.rl-content-banner.scan { background-image: url(../../images/default/Banner_CC_3D_Scan.jpg); }

.rl-content-banner.character .rl-title,
.rl-content-banner.character .rl-text-desc { color: #fff; }
.rl-content-banner .more-link {
    font-size: calc(0.25vw + 19.2px); /*24-20*/
}
/*.rl-content-banner.character .rl-source { 
    color: rgba(200, 200, 200, 0.5);
    font-size: 14px;
    position: absolute;
    right: 40px;
    bottom: 20px;
}*/

.rl-special-label{
    color: #82be0f;
    opacity: 0.8;
    font-weight: normal;
    font-size: calc(0.5vw + 22.4px); /*32 -> 24*/
}



/*------------------------------------
        	$Showcase
------------------------------------*/
.rl-showcase .showcase-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 15px;
}
    .rl-showcase .showcase-container .col-first,
    .rl-showcase .showcase-container .col-third {
        /*515px/1380px*/
        width: 37.31884%;
        margin-bottom: -5px;
    }
    .rl-showcase .showcase-container .col-second {
        /*340px/1380px*/
        width: 24.63768%;
        margin-right: 5px;
        margin-left: 5px;
        margin-bottom: -5px;
    }
    .rl-showcase .showcase-container .item {
        margin-bottom: 5px;
        position: relative;
    } 
        .rl-showcase .showcase-container .item .mask {
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .rl-showcase .showcase-container .item:hover .mask {
            background-color: rgba(0, 0, 0, 0.85);
        }
            .rl-showcase .showcase-container .item .mask p {
                /*36/1920*/
                font-size: 1.875vw;
                text-align: center;
                -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .rl-showcase .showcase-container .item:hover .mask p {
                color: #82be0f;
            }

.slick-prev, .slick-next {
    top: calc(50% - calc( 12px + 0.9375vw));
}
            
@media screen and ( max-width: 767px ){
    .rl-showcase .showcase-container {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
        .rl-showcase .showcase-container .col-first,
        .rl-showcase .showcase-container .col-second,
        .rl-showcase .showcase-container .col-third {
            width: 100%;
            margin: 0;
        }
        .rl-showcase .showcase-container .item .mask p {
            /*36-24*/
            font-size: calc(2.6785714285714284vw + 15.428571428571429px);
        }

	.rl-content-banner.digitalHuman { background-image: url(../../images/default/RWD_Banner_CC_Digital-Human.jpg); }
    .rl-content-banner.generatedPhoto { background-image: url(../../images/default/RWD_Banner_CC_GeneratedPhoto.jpg); }
    .rl-content-banner.animation { background-image: url(../../images/default/RWDBanner_CC_for_Animation.jpg); }
    .rl-content-banner.gameDesign { background-image: url(../../images/default/RWD_Banner_CC_game.jpg); }
    .rl-content-banner.dazTransformer { background-image: url(../../images/default/RWD_Banner_CC_for_Daz.jpg); }
    .rl-content-banner.zbrushPipeline { background-image: url(../../images/default/Banner_CC_for_ZBrush.jpg); }
    
    .rl-content-banner.rendering { background-image: url(../../images/default/RWD_Banner_CC_for_Visualization.jpg); }
    
    .rl-content-banner.scan { background-image: url(../../images/default/RWD_Banner_CC_3D_Scan.jpg); }

    .rl-title {
        font-size: calc(4.017857142857143vw + 17.142857142857142px);
    }
    .rl-text-home-feature{
        font-size: calc(0.8928571428571428vw + 13.142857142857142px);
    }
    .rl-home-banner-main-img{
        max-width: calc(100% * 0.8);
    }
    .rl-home-banner-main-img-04{
        max-width: calc(8.258928571428571vw + 48.57142857142857px);
    }
}

.testimonial-area .arrow {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: rgba(98, 98, 98, 0.8);
    height: calc(0.8750000000000001vw + 27.2px);
    /*44-30*/
    width: calc(0.8750000000000001vw + 27.2px);
    text-align: center;
    border-style: none;
    -webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
}

.testimonial-area:hover .arrow {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.testimonial-area .arrow i.fa {
    color: #fff;
    font-size: calc(17.6px + 0.75vw);
}

.testimonial-area .prev1 {
    position: absolute;
    left: 15px;
    top: 10%;
    bottom: 0;
    z-index: 10;
    margin: auto;
}

.testimonial-area .next1 {
    position: absolute;
    right: 15px;
    top: 10%;
    bottom: 0;
    z-index: 10;
    margin: auto;
}


/*------------------------------------
        	$Award
------------------------------------*/
/*--- overwrite owl-slide ---*/
.owl-theme .owl-controls .owl-page.active span, 
.owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 1;
    background-color: #82be0f; 
}


.rl-award-bg {
    background-color: black; 
    background-image: url(../../images/default/adward_bk.jpg); 
    height: 23.9583333vw; /* 460px */
    min-height: 400px;
}
.rl-logo-adjust {
    margin-right: 30px;
    width: 85%;
}

.rl-flex-end{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}


/*------------------------------------
        	$Media Query
------------------------------------*/
@media screen and ( max-width: 1250px ){
    .rl-logo-adjust {
        margin-right: 0;
        width: auto;
    }
}

@media screen and ( max-width: 991px ){
    /* .rl-content-body { padding-top: 30px; } */
    .rl-content-banner-rightside { background-position: 50% 50%; }
    .rl-content-banner-leftside { background-position: 50% 50%; }

    /* .rl-banner-text{
        padding-top: calc(0.7451564828614009vw + 22.615499254843517px);
        margin-bottom: calc(0.7451564828614009vw + 12.615499254843517px);
    }

    .rl-banner-wrapper{
        margin-top: calc(2.1528525296017222vw + 8.665231431646932px);
    } */
}


@media screen and ( max-width: 768px ){
    .rl-special-banner-768 .rl-main-banner-subtitle{
        margin-bottom: 15px;
        margin-right: 0;
        font-size: 28px;
        display: block;
    }
}

@media screen and ( max-width: 767px ){
    .rl-banner-wrapper{
        max-width: 620px;
    }
    .rl-banner {
        min-height: 400px;
        height: 400px;
    }

    .rl-banner .button-sets {
        flex-wrap: wrap;
        justify-content: center;
    }
    .rl-banner .button-sets .play-text {
        margin-left: 0;
    }

    .btn-play{
        width: 65px;
        height: 65px;
    }

    .rl-banner-wrapper{
        margin-top: 15px;
    }
    .control-breakline-xs{
        display: block;
    }

    .rl-content-banner{
        min-height: 400px;
        max-height: 400px;
    }

    .rl-content-body{
        padding-top: 20px;
        height: initial;
    }
}

@media screen and ( max-width: 480px ){
    .control-breakline-xs{
        display: inline;
    }
}
.popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 50%;
    margin: 20px auto;
    text-align: center;
}