/*------------------------------------
        	$General
------------------------------------*/
.button-sets {
    text-align: center;
}
.button-sets button {
    margin: 10px calc(15px + 0.5vw);
}
.button-sets .btn-default {
    border-radius: 0;
    font-size: calc(14px + 0.5vw);
    height: calc(1.1vw + 26px);
    min-width: calc(6.5vw + 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;
}

/*------------------------------------
        	$Banner
------------------------------------*/
.rl-banner {
    background-color: black;
    height: 31.25vw;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex; 
    position: relative;
}

.rl-banner .scroll-button:hover {
    background-color: #577d0f;
}
.rl-banner .scroll-button .fa-angle-down { 
    color: #fff;
    /*32-48*/ 
    font-size: calc(0.3472222222222222vw + 25.333333333333332px);
}

.rl-banner-rightcenter{
    /*-webkit-box-orient: vertical; 
    -webkit-box-direction: normal;
    -ms-flex-direction: column; 
    flex-direction: column;*/
}
.rl-banner-text {
    font-size: calc( 26.4px + 0.5vw);
    font-weight: 300;
    color: #e8e8e8;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1vw;
}

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

.rl-banner-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.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;
}

.rl-banner .rl-play-wrapper{
    border-radius: 50%; 
    border: 2px solid #fff;
    background: transparent;
    margin: 0;
    min-width: 40px;
    min-height: 40px; 
    pointer-events: none;
    position: static;
    width: calc(2.604166666666667vw + 30px); /*80:1920-50:768*/
    height: calc(2.604166666666667vw + 30px);
    -webkit-transition: 
                background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: 
                background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 
                background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
    .rl-banner .rl-rel:hover .rl-play-wrapper{
        background:  transparent;
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        transform: scale(1.1, 1.1);
    }
    .rl-banner .rl-play{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(0.8680555555555556vw + 3.3333333333333335px) 0 calc(0.8680555555555556vw + 3.3333333333333335px) calc(1.3020833333333335vw + 5px); /*20:1920-10:768, 30:1920-15:768*/
        border-color: transparent transparent transparent rgba(255,255,255,1);
        margin-left: calc( 3.2px + 0.25vw ); 
        /*8-4*/
    }

.banner-mask {
    /* background-color: rgba(0, 0, 0, 0.4); */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.rl-button-border,
.rl-button-border:focus,
.rl-button-border:active,
.rl-button-border:active:focus{
    background-color: transparent;
    color: #82be0f;
}

.rl-button-border:hover{
    background-color: #82be0f;
    color: #fff;
}


/*------------------------------------
    $What Can iClone Do For You
------------------------------------*/
#announcement {
    position: relative;
}

#announcement .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;
    top: -24px;
    right: 0;
    left: 0;
    z-index: 1;
    outline: none;
}

.rl-title { font-size: calc(1.25vw + 26px); /*1920:50, 320:30*/ }
.rl-title-main {
    font-size: calc(2.1875vw + 23px); /*1920:65, 320:30*/
}

.rl-content-body { 
    padding-top: calc(5.920344456404736vw + -28.670613562970935px); /*1920:85, 991:30*/
}
.rl-content-body .rl-title,
.rl-content-body .rl-text-desc { color: #c8c8c8; }
.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 .rl-text-desc { font-weight: 400; }
.rl-content-banner.character { background-image: url(../../images/default/Banner_01.jpg?20180309); }
.rl-content-banner.animation { background-image: url(../../images/default/Banner_02.jpg?20180309); }
.rl-content-banner.directing { background-image: url(../../images/default/Banner_03.jpg?20180309); }
.rl-content-banner.rendering { background-image: url(../../images/default/Banner_04.jpg?20180309); }
.rl-content-banner.pipeline { background-image: url(../../images/default/Banner_05.jpg?20180309); }
.rl-content-banner.extension { background-image: url(../../images/default/Banner_06.jpg?20180309); }
.rl-content-banner.content { background-image: url(../../images/default/Banner_07.jpg?20180309); }

.rl-content-banner.character .rl-title,
.rl-content-banner.character .rl-text-desc { color: #666; }
.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;
}*/



/*------------------------------------
        	$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;
            }



    .master-title-wrapper{
        background-color: #3b3b3b;
    }
        .master-title{
            padding-left: calc(0.9375vw + 12px);
            padding-right: calc(0.9375vw + 12px);
        }
        .master-title-img{
            border-right: 2px solid #fff;
        }
            .master-title-img img{
                width: calc(2.75vw + 141.2px)
            }
    
    .master-author-wrapper{
        padding: calc( 14px + 0.9vw);
        /* padding-right: calc( 14px + 1.875vw); */
    }

    .master-content-wrapper + .master-content-wrapper{
        margin-top: 10px;
    }

    .author-name{
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: calc(1.25vw + 26px);
        line-height: 1.2;
    }

    .rl-bg-master{
        background-color: #5e5e5e;
    }

    .rl-img-pos-center{
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    }


@media screen and ( max-width: 767px ){
    .rl-author-img{
        margin: 0 auto;
    }

    .rl-mobile-pos-center{
        -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    }

    .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);
        }

    .master-title-wrapper{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
        .master-title{
            width: 100%;
        }
        .master-title-img{
            border-right: none;
        }
        .master-title-img img{
            margin: 0 auto 20px;
        }
        .master-title-desc{
            text-align: center
        }

    .author-name{
        text-align: center;
    }
}


/*------------------------------------
        	$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%;
}




/*------------------------------------
        	$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: 767px ){
    .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;
    }
}

.popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 50%;
    margin: 20px auto;
    text-align: center;
}