/*------------------------------------*\
            $CSS閮餉圾璅??.css
\*------------------------------------*/
/*
    * General.....................General use
    * Animation Effect............Animation
    * Media Query.................RWD Setting
        * General.....................
        * Animation Effect............
*/





/*------------------------------------
            $General
------------------------------------*/
html{ font-size: 16px; }
    body {
        font-family:'Roboto', sans-serif;
    }

/*----- font size for seo -----*/
    .text-lg, .text-md, .text-sm, .text-xs{margin: 0;}
    .text-lg{ 
        font-size: 5.25rem; 
        line-height: 1.1;
        font-weight: 500;
        padding-top: 0;
        padding-bottom: 0;
    }
    .text-md{
        color: #545454; 
        font-size: 2.2rem; 
        font-weight: 300;
        line-height:1.1; 
        padding-top: 0;
        padding-bottom: 40px;
    }
    .text-sm{
        color: #333333; 
        font-size: 2.25rem;
        font-weight: 500; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: 40px;
    }
    .text-xs{
        color: #393939; 
        font-size: 1.875rem; 
        font-weight: bold;
        line-height: 1.1; 
        padding-top: 30px ;
        padding-bottom: 20px;
    }

    p, li, .text-p{font-size: 1.125rem; color: #747474; line-height: 1.5;}    
    p, ul{padding-bottom: 20px;}

/*----- Layout -----*/
    

    .rl-row-1440{
        max-width: 1440px; 
        margin: 0 24.1%;
        padding-right: 15px;
        padding-left: 15px;
    } 

    /*-----display: flex-----*/
    .flex{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }

    /*-----flex: 垂直置中-----*/
    .flex-align-center{   
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    
    /*-----flex: 水平、垂直置中-----*/
    .flex-all-align{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
            -ms-justify-content: center;
                    -ms-flex-pack: center;
                    justify-content: center;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
            
    }
    .flex-all-align-column{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
            -ms-justify-content: center;
                    -ms-flex-pack: center;
                    justify-content: center;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }

/*-----Link Style-----*/
    .rl-style a{color: #7DB514;}
    .rl-style a:hover{color:#7DB514;}
    .rl-style a:focus,
    .rl-style a:active,
    .rl-style a:active:focus{color:#7DB514; outline: none;}

/*-----Background Color-----*/
    .bg-color-black{background-color: #000;}
    .bg-color-white{background-color: #fff;}
    .bg-color-gray{background-color: #222222;}
    .bg-color-lightgray{background-color: #f3f3f3;}

/*----- Button style for site -----*/
    /* button with fill bg*/
    .rl-btn-fill{
        background-color: #82BE10;
        border: 2px solid #82BE10;
        color: #fff;
        line-height: normal;
        font-size: 1.125rem;
        border-radius: 0;  
    }
    .rl-btn-fill:hover, 
    .rl-btn-fill:focus, 
    .rl-btn-fill:active, .rl-btn-fill:active:focus{
        opacity: 0.8;
        color: #fff;
    }

    /* button with border*/
    .rl-btn-border{
        background-color: transparent;
        border: 2px solid #82BE10;
        color: #42D365;
        /*line-height: normal;*/
        font-size: 1rem;
        border-radius: 0;
    }
    .rl-btn-border:hover,
    .rl-btn-border:active, .rl-btn-border:active:focus{
        background-color: #82BE10;
        border: 2px solid #82BE10;
        color: white;
        outline:none;
    }
    .rl-btn-border:focus{
        background-color: transparent;
        border: 2px solid #82BE10;
        color: #82BE10;
        outline:none;
    }

/*comonn class for adjust*/
    .hidden{display: none !important;}
    .display-none { display: none; }
    .display-inline-block{ display: inline-block; }
    
    .rl-position-rel{position: relative;}

    /*position center*/
    .text-center{text-align: center;}
    .text-right{text-align: right;}
    .text-left{text-align: left;}

    .right{float: right;}
    .left{float: left;}
    .center{margin: 0 auto;}


    .no-padding-l{padding-left: 0;}
    .no-padding-r{padding-right: 0;}
    .no-padding-lr{padding-left: 0;padding-right: 0;}
    .no-padding-top{margin-top: 0;}
    .no-padding{padding: 0;}

    /*center in different resolution*/
    .rl-media-center-lg{margin: 0 auto;}

    /*space in different resolution*/
    .col-lg-12.rl-block-wrapper{margin-bottom: 40px;}
    .col-lg-12.rl-block-top-wrapper{margin-top: 40px;}





/*------------------------------------
          $Animation Effect
------------------------------------*/
/*-----smooth transition-----*/
    .transition{
        -webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
    }





/*------------------------------------
          $space for every row
------------------------------------*/
    /*----- 95px -----*/
    .rl-row{ 
        padding-top: calc( 30px + 3.4vw ); 
        padding-bottom: calc( 30px + 3.4vw ); 
    }
    .rl-row-top{ 
        padding-top: calc( 10px + 2.4vw ); 
        padding-bottom: calc( 10px + 1.4vw );  
    }
    .rl-row-bottom{ 
        padding-top: 0; 
        padding-bottom: calc( 30px + 3.4vw ); 
    }

    /*----- 120px -----*/
    .rl-row2{
        padding-top: calc( 45px + 3.95vw ); 
        padding-bottom: calc( 45px + 3.95vw ); 
    }
    .rl-row2-bottom{
        padding-top: 0; 
        padding-bottom: calc( 45px + 3.95vw ); 
    }

    /*----- 70px -----*/
    .rl-row3{
        padding-top: calc( 20px + 2.65vw ); 
        padding-bottom: calc( 20px + 2.65vw );         
    }
    .rl-row3-bottom{
        padding-top: 0; 
        padding-bottom: calc( 20px + 2.65vw );         
    }

    /*----- 60px -----*/
    .rl-row4{
        padding-top: calc( 15px + 2.35vw ); 
        padding-bottom: calc( 15px + 2.35vw );         
    }
    .rl-row4-bottom{
        padding-top: 10px; 
        padding-bottom: calc( 10px + 0.35vw );         
    }

    /*----- 80px -----*/
    .rl-row5{
        padding-top: calc( 25px + 3.4vw ); 
        padding-bottom: calc( 25px + 3.4vw );         
    }
    .rl-row5-bottom{
        padding-top: 0; 
        padding-bottom: calc( 25px + 3.4vw );         
    }



/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and ( max-width: 1440px ){
    /*----- Layout -----*/
    .rl-row-1440{ margin: 0 4.17%; }
}

@media screen and ( max-width: 1199px ){
    /*------------------------------------
                $General
    ------------------------------------*/

    /*----- font size for seo -----*/
    .text-md,
    .text-sm{ padding-bottom: 35px; }
    .text-xs{ padding-top: 25px; padding-bottom: 15px; }

    /*center in different resolution*/
    .rl-media-center-md{margin: 0 auto;}
    .text-center-md{text-align: center;}

    /*space in different resolution*/
    .col-md-12.rl-block-wrapper{margin-bottom: 35px;}
    .col-lg-12.rl-block-top-wrapper{margin-top: 35px;}

}

@media screen and ( max-width: 991px ){
    /*------------------------------------
                $General
    ------------------------------------*/

    /*----- font size for seo -----*/
    .text-md, .text-sm{ padding-bottom: 25px; }

    /*----- Layout -----*/
    .rl-row-1440{
        padding-right: 15px;
        padding-left: 15px;
        margin: 0 auto;
    }

    /*center in different resolution*/
    .rl-media-center-sm{margin: 0 auto;}
    .text-center-sm{text-align: center;}

    /*space in different resolution*/
    .col-sm-12.rl-block-wrapper{margin-bottom: 25px;}
    .col-lg-12.rl-block-top-wrapper{margin-top: 25px;}

}

@media screen and ( max-width: 767px ){
    /*------------------------------------
                $General
    ------------------------------------*/

    /*----- font size for seo -----*/
    .text-lg{ font-size: 3.375rem }
    .text-md{ font-size: 2.5rem; }
    .text-md, .text-sm{ padding-bottom: 20px; }

    /*center in different resolution*/
    .rl-media-center-xs{margin: 0 auto;}
    .text-center-xs{text-align: center;}

    /*space in different resolution*/
    .col-xs-12.rl-block-wrapper{margin-bottom: 20px;}
    .col-lg-12.rl-block-top-wrapper{margin-top: 20px;}

}

@media screen and (max-width: 500px){
    /*------------------------------------
                $General
    ------------------------------------*/

    /*----- font size for seo -----*/
    .text-lg{font-size: 3rem}
    .text-md{font-size: 2rem;}
    .text-sm{font-size: 1.75rem;}
    .text-xs{font-size: 1.5rem;}
    
    /*----- Layout -----*/
    .rl-row-1440{
        padding-right: 0;
        padding-left: 0;
    }


}