/*------------------------------------*\
            Common.css
\*------------------------------------*/
/*
    * General.....................General use
    * Animation Effect............Animation
    * space............space for every row
    * Media Query.................RWD Setting
        * General.....................
        * Animation Effect............
*/





/*------------------------------------
            $General
------------------------------------*/
html{ font-size: 16px; }
    body {
        font-family:'Roboto', sans-serif;
        /* padding-top: calc( 48px + 0.625vw ); */
        color: #4d4d4d;
    }
    #topnavarea.affix{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
    }
    #topnavarea.affix-top{
        display: block;
    }

/*----- font size for seo -----*/
    .mainDescription{ font-size: calc( 17.2px + 0.25vw )!important ; }
    .text-lg, .text-md, .text-sm, .text-xs, p{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: 3rem; */
        font-size: calc( 27.2px + 0.875vw ); /*44*/
        font-weight: 300;
        line-height:1.3; 
        padding-top: 0;
        /*padding-bottom: 40px;*/
        padding-bottom: calc( 16px + 1.25vw );
    }
    .text-sm{
        /*color: #333333; */
        /*font-size: 2.25rem;*/
        font-size: calc( 26px + 0.625vw ); /*38*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        /*padding-bottom: 40px;*/
        padding-bottom: calc( 16px + 1.25vw );
    }
    .text-xs{
        /*color: #393939; */
        /*font-size: 1.875rem; */
        font-size: calc( 22.8px + 0.375vw ); /*30*/ 
        font-weight: 400;
        line-height: 1.1; 
        /*padding-top: 30px ;*/
        padding-top: calc( 18px + 0.625vw );
        /*padding-bottom: 20px;*/
        padding-bottom: calc( 14px + 0.3125vw );
    }

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

    .w100{ width: 100%; }
/*----- Layout -----*/
    .rl-row-1440{
        max-width: 1440px; 
        margin: 0 12.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.align-content-space-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between;
    }

    .flex .align-self-end {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }
    
    /*-----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-align-center2{   
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
                justify-content: center;
        -webkit-justify-content: 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: #535353;}

/*----- 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{
        background-color: transparent;
        color: #82BE10;
        outline:none;
    }

    /* 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: calc( 16px + 1.25vw );}
    .col-lg-12.rl-block-top-wrapper{margin-top: calc( 16px + 1.25vw );}





/*------------------------------------
          $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
------------------------------------*/
    /*----- 95px -----*/
    .rl-row{ 
        padding-top: calc( 35px + 3.125vw ); 
        padding-bottom: calc( 35px + 3.125vw ); 
    }
    .rl-row-top{ 
        padding-top: calc( 35px + 3.125vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom{ 
        padding-top: 0; 
        padding-bottom: calc( 35px + 3.125vw ); 
    }

    /*----- 80px -----*/
    .rl-row-80{
        padding-top: calc( 32px + 2.5vw ); 
        padding-bottom: calc( 32px + 2.5vw );         
    }

    .rl-row-top-80{ 
        padding-top: calc( 32px + 2.5vw ); 
        padding-bottom: 0; 
    }

    .rl-row-bottom-80{
        padding-top: 0; 
        padding-bottom: calc( 32px + 2.5vw );         
    }

    /*----- 65px -----*/
    .rl-row-65{
        padding-top: calc( 23px + 2.1875vw ); 
        padding-bottom: calc( 23px + 2.1875vw );         
    }
    .rl-row-top-65{ 
        padding-top: calc( 23px + 2.1875vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom-65{
        padding-top: 0; 
        padding-bottom: calc( 23px + 2.1875vw );         
    }

    /*----- 40 px -----*/
    .rl-row-40{
        padding-top: calc( 16px + 1.25vw ); 
        padding-bottom: calc( 16px + 1.25vw );         
    }
    .rl-row-top-40{ 
        padding-top: calc( 16px + 1.25vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom-40{
        padding-top: 0; 
        padding-bottom: calc( 16px + 1.25vw );         
    }





/*------------------------------------
            $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: calc( 16px + 1.25vw )}
    .col-md-12.rl-block-top-wrapper{margin-top: calc( 16px + 1.25vw )}

}

@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: calc( 16px + 1.25vw );}
    .col-sm-12.rl-block-top-wrapper{margin-top: calc( 16px + 1.25vw );}

}

@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: calc( 16px + 1.25vw );}
    .col-xs-12.rl-block-top-wrapper{margin-top: calc( 16px + 1.25vw );}

}

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


}