/*------------------------------------*\
            default.css
\*------------------------------------*/
/*
    * General.....................General use
    * Iiregular Block
    * Media Query.................RWD Setting
*/

/*------------------------------------
            $General
------------------------------------*/
/*.rl-declareBoard-header-common{
    background-image: url(../../images/features/FeatureHome_Banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding: calc( 16px + 4.375vw ) 0; /*100-30*/
/*}*/
	/*.rl-declareBoard-header .title{
        font-family: 'Roboto', sans-serif;
        font-size: calc( 23.2px + 2.125vw ); /*64-30*/
    /*padding-left: 15px;
    padding-right: 15px;
    margin: 0;
    text-align: center;
}*/

/*------------------------------------
            $Iiregular Block
------------------------------------*/
.rl-background-response {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.iiregular-block .img-wrapper {
    float: left;
    position: relative;
    overflow: hidden;
}

.iiregular-block .img-wrapper .mask {
    width: 100%;
    height: 100%;
}

.iiregular-block .img-wrapper img,
.iiregular-block .img-wrapper .mask,
.iiregular-block .img-wrapper .text-wrapper,
.iiregular-block .img-wrapper .text-desc,
.iiregular-block .img-wrapper ul {
    -webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.iiregular-block .img-wrapper:hover img {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

.iiregular-block .img-wrapper:hover .mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    z-index: 9;
}

.iiregular-block .img-wrapper:hover ul {
    list-style-image: url(../../images/li-hov.png);
}

.iiregular-block .img-wrapper .text-wrapper {
    position: absolute;
}

.third-row .img-wrapper .text-wrapper{
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .img-wrapper .text-desc,
.iiregular-block .img-wrapper ul {
    color: #000;
}

.iiregular-block .img-wrapper:hover .text-wrapper {
    z-index: 10;
}

.iiregular-block .img-wrapper:hover .text-desc {
    color: #fff;
}

.iiregular-block .img-wrapper:hover ul {
    color: #e4e4e4;
}

.iiregular-block .img-wrapper .text-desc {
    font-size: 1.4583vw; /*28px ( 1.75rem )*/
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
}

.iiregular-block .img-wrapper ul {
    padding-left: 15px;
    margin-bottom: 0;
}

.iiregular-block .img-wrapper ul li {
    font-size: 0.9375vw; /*18px*/
}

.label-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border-width: calc(3.125vw + 30px) calc(4vw + 38.2px) 0px 0px; /*1920~320 90px~40px 115px~51.1111px*/
    border-style: solid;
    border-color: #e9380e transparent transparent #e9380e;
    -webkit-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.label-wrapper > div {
    transform: rotate(-39deg) translate(calc(calc(1.75vw + 15.4px)), calc(-1.25vw + -12px)); /*1920~320* 49px~21px  -36px~-16px*/
    color: #fff;
    font-size: calc(0.8750000000000001vw + 5.2px); /*1920~320 22px~8px;*/ 
}

.iiregular-block .img-wrapper:hover .label-wrapper {
    transform: translate(calc((-4vw + -38.2px) / 2), calc((-3.125vw + -30px) / 2));
}

/*--- first-row ---*/
.iiregular-block .first-row .environment .text-wrapper {
    left: 2.0833vw; /*40px*/

    bottom: 1.5625vw;

    /*30px*/
}

.iiregular-block .first-row .character .text-wrapper {
    left: 2.0833vw; /*right: 6.7708vw; 130px*/

    bottom: 1.5625vw;
}

.iiregular-block .first-row .img-wrapper:first-child {
    width: 32.66%;
    margin-right: 15px;
}

.iiregular-block .first-row .img-wrapper:last-child {
    width: calc( (100% - 32.66%) - 15px );
    margin-bottom: 15px;
}

/*--- second-row ---*/
.iiregular-block .second-row .animation .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .second-row .head .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .second-row .img-wrapper:first-child {
    width: calc( (100% - 32.66%) - 15px );
    margin-right: 15px;
    margin-bottom: 15px;
}

.iiregular-block .second-row .img-wrapper:last-child {
    width: 32.66%;
    margin-bottom: 15px;
}

/*--- third-row ---*/
.iiregular-block .third-row .props .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .third-row .export .text-wrapper {
    left: 2.0833vw;
    top: 1.5625vw;
}

.iiregular-block .third-row .img-wrapper {
    width: calc( (100%  - 15px ) / 2);
    max-width: 705px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.iiregular-block .third-row .img-wrapper:last-child {
    margin-right: 0;
}

/*--- fourth-row ---*/
.iiregular-block .fourth-row .pipeline .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .fourth-row .img-wrapper {
    width: 100%;
    margin-bottom: 15px;
}

/*--- five-row ---*/
.iiregular-block .five-row .animation .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .five-row .head .text-wrapper {
    left: 2.0833vw;
    bottom: 1.5625vw;
}

.iiregular-block .five-row .img-wrapper:first-child {
    width: calc( (50%) - 7.5px );
    margin-right: 15px;
    margin-bottom: 15px;
}

.iiregular-block .five-row .img-wrapper:last-child {
    width: calc( (50%) - 7.5px );
    margin-bottom: 15px;
}

.rl-background-response {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.webContent {
    display: none;
}
/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 1440px) {
    /*------------------------------------
                $Iiregular Block
    ------------------------------------*/
    .iiregular-block .img-wrapper .text-desc {
        font-size: 1.9444vw; /*28px ( 1.75rem )*/
    }

    .iiregular-block .img-wrapper ul li {
        font-size: 1.25vw; /*18px*/
    }

    /*--- first-row ---*/
    /* .iiregular-block .first-row .character .text-wrapper {
        left: 25.5vw;
    } */
}

@media screen and (max-width: 991px) {
    .iiregular-block .img-wrapper .text-desc {
        margin-bottom: 10px;
    }

    /*--- first-row ---*/
    /* .iiregular-block .first-row .character .text-wrapper {
        left: 30.27245vw;
    } */
}

@media screen and (max-width: 767px) {
    /*------------------------------------
                $Iiregular Block
    ------------------------------------*/
    /*--- first-row ---*/
    .iiregular-block .first-row .img-wrapper:first-child,
    .iiregular-block .first-row .img-wrapper:last-child,
    .iiregular-block .second-row .img-wrapper:first-child,
    .iiregular-block .second-row .img-wrapper:last-child,
    .iiregular-block .five-row .img-wrapper:first-child,
    .iiregular-block .five-row .img-wrapper:last-child,
    .iiregular-block .third-row .img-wrapper {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .iiregular-block .third-row .img-wrapper{
        max-width: 100%;
    }

    .iiregular-block .img-wrapper .text-desc {
        font-size: 3.385416vw; /*26px*/

        margin-bottom: 15px;
    }

    .iiregular-block .img-wrapper ul li {
        font-size: 2.08333vw; /*16px*/
    }

    /*--- first-row ---*/
    .iiregular-block .first-row .environment .text-wrapper {
        left: 3.90625vw; /*30px*/

        bottom: 3.90625vw;

        /*30px*/
    }

    /* .iiregular-block .first-row .character .text-wrapper {
        left: 44.921875vw; 

        bottom: 1.5625vw;
    } */

    /*--- second-row ---*/
    .iiregular-block .second-row .animation .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .iiregular-block .second-row .head .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    /*--- third-row ---*/
    .iiregular-block .third-row .props .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .iiregular-block .third-row .export .text-wrapper {
        left: 3.90625vw;
        top: 3.90625vw;
    }

    /*--- fourth-row ---*/
    .iiregular-block .fourth-row .pipeline .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .iiregular-block .five-row .head .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .iiregular-block .five-row .animation .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .iiregular-block .first-row .character .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }

    .third-row .img-wrapper .text-wrapper {
        left: 3.90625vw;
        bottom: 3.90625vw;
    }
}

@media screen and (max-width: 500px) {
    /*------------------------------------
                $Iiregular Block
    ------------------------------------*/
    .iiregular-block .img-wrapper .text-desc {
        font-size: 4vw; /*20px*/

        margin-bottom: 0;
    }

    .iiregular-block .img-wrapper ul {
        display: none;
    }

    .iiregular-block .first-row .environment .text-wrapper, .iiregular-block .first-row .character .text-wrapper,
    .iiregular-block .second-row .animation .text-wrapper, .iiregular-block .second-row .head .text-wrapper,
    .iiregular-block .third-row .props .text-wrapper, .iiregular-block .third-row .export .text-wrapper,
    .iiregular-block .fourth-row .pipeline .text-wrapper {
        bottom: 6vw; /*30px*/
    }
}