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



#main-topnavarea{ height: 50px; }
.border{ border: 1px solid #000; }

/*------------------------------------
            $General
------------------------------------*/
html{ font-size: 16px; }
    body {
        font-family:'Roboto', sans-serif;
        /*padding-top: calc( 48px + 0.625vw );*/
        /*padding-top: 60px;*/
        color: #4d4d4d;
    }

    /*----- Layout -----*/
    .position-relative{ position: relative; }
    .container-fluid{}
    .rl-row-1440{
        max-width: 1440px; 
        margin: 0 12.1%;
        padding-right: 15px;
        padding-left: 15px;
    }
/*    .rl-row-1540{
        max-width: calc( 1540px + 30px ); 
        margin: 0 8.7%;
        padding-right: 15px;
        padding-left: 15px;
    }*/
    /*-----display: flex-----*/
    .flex-container{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
    .direction-column{
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .align-center{
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .align-content{
        -webkit-align-content: space-between;
            -ms-flex-line-pack: justify;
                align-content: space-between;
    }
    .align-self-flex-end{
        -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end;
    }
    .justify-center{
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .justify-space-between{
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }


    /*----- font size for seo -----*/
	.text-lg, .text-md, .text-sm, .text-xs, p{margin: 0;}
    .text-lg{ 
        font-size: 5.25rem; 
        line-height: 1.3;
        font-weight: 500;
        padding-top: 0;
        padding-bottom: 0;
    }
    .text-md{
        font-size: calc( 28.8px + 1vw ); /*48*/
        font-weight: 300;
        line-height:1.3; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
    }
    .text-sm{
        font-size: calc( 26.4px + 0.5vw ); /*36*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
    }
    .text-xs{
        font-size: calc( 22.8px + 0.375vw ); /*30*/ 
        font-weight: 400;
        line-height: 1.1; 
        padding-top: calc( 18px + 0.625vw );
        padding-bottom: calc( 13px + 0.625vw );
    }
    p, li, .text-desc{
    	font-size: 1.125rem;  
    	line-height: 1.5; 
    	font-weight: 300;
    }    
   	p, ul{ /*padding-bottom: 20px;*/ }

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

	/*-----Background Color-----*/
    .bg-color-black{background-color: #000;}
    .bg-color-white{background-color: #fff;}
    .bg-color-gray{background-color: #d3d3d3;}
    .bg-color-darkgray{background-color: #4a4a4a;}
    .bg-color-lightgray{background-color: #f4f4f4;}


	/*----- Button style -----*/
    /* button with fill bg*/
    .rl-btn-fill{
        background-color: #7f7f7f;
        /*border: 2px solid #7f7f7f;*/
        color: #fff;
        line-height: normal;
        font-size: 1.125rem;
        border-radius: 0;  
    }
    .rl-btn-fill:hover, 
    .rl-btn-fill:active, .rl-btn-fill:active:focus{
        background-color: #959595 !important;
        color: #fff !important;
        outline:none;
    }
    .rl-btn-fill:focus{
		background-color: #7f7f7f;
        color: #fff;
        outline:none;
    }

    /* button with border*/
    .rl-btn-border{
        background-color: transparent;
        border: 2px solid #82BE10;
        color: #42D365;
        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;
    }

	/*slick style*/
	.slick-prev:before, .slick-next:before{ color: #333333; }





/*------------------------------------
        	$Common Module
------------------------------------*/
	




/*------------------------------------
        	$Font Face
------------------------------------*/
/*----- font face -----*/






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

    /*----- 60px -----*/
    .rl-row-60{
        padding-top: calc( 24px + 1.875vw ); 
        padding-bottom: calc( 24px + 1.875vw );         
    }
    .rl-row-top-60{ 
        padding-top: calc( 24px + 1.875vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom-60{
        padding-top: 0; 
        padding-bottom: calc( 24px + 1.875vw );         
    }

    /*----- 50 px -----*/
    .rl-row-50{
        padding-top: calc( 14px + 1.875vw ); 
        padding-bottom: calc( 14px + 1.875vw );         
    }
    .rl-row-top-50{ 
        padding-top: calc( 14px + 1.875vw ); 
        padding-bottom: 0; 
    }
    .rl-row-bottom-50{
        padding-top: 0; 
        padding-bottom: calc( 14px + 1.875vw );         
    }

    /*----- 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%; }
    .rl-row-1540{ margin: 0 4.17%; }
}

@media screen and ( max-width: 991px ){
	/*------------------------------------
                $General
    ------------------------------------*/
    /*----- Layout -----*/
    .rl-row-1440{
        padding-right: 15px;
        padding-left: 15px;
        margin: 0 auto;
    }
    .rl-row-1540{
        padding-right: 15px;
        padding-left: 15px;
        margin: 0 auto;
    }

    /*----- sub-topbar -----*/
	.sub-topbar{ 
		-webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
	}

}

@media screen and ( max-width: 767px ){
	/*------------------------------------
                $General
    ------------------------------------*/
    /*----- sub-topbar -----*/
	/*.dropdown-mobile{
		background-color: #a0a0a0;
	}
	.dropdown-mobile li{ display: block; }
		.dropdown-mobile li a{ 
			color: #fff; 
			padding-top: 10px; 
			padding-bottom: 10px; 
		}
		.dropdown-mobile li a:hover,.dropdown-mobile li a:visited{ text-decoration: underline; }*/

}

@media screen and ( max-width: 600px ){
	/*------------------------------------
                $General
    ------------------------------------*/
	
	/*------------------------------------
        	$Common Module
	------------------------------------*/
	/*----- sub-topbar -----*/
	/*.sub-topbar li,
	.sub-topbar li a{ width: 100%; }
	.sub-topbar .dropdown-menu{ position: relative; }

	.dropdown .dropdown-menu {
	    max-height: 0;
	    display: block;
	    overflow: hidden;
	    opacity: 0;
	    padding: 0;
	    -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;
	}
	.open .dropdown-menu {
	    max-height: 350px;
	    opacity: 1;
	    padding-bottom: 15px;
	}
	
	.navgation-wrapper{
		-webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
	}
	.navgation{ 
		padding-left: 0; 
		text-align: center;
		margin-top: 20px;
		width: 100%; 
	}*/
}

@media screen and ( max-width: 500px ){
	/*------------------------------------
            	$General
	------------------------------------*/
	
}
.howto{
	display: flex;
    justify-content: center;
	padding-top:50px;
	}
	

	
.howto a:link, .howto a:visited{
	color: #4d4d4d;
	text-decoration: none;
}
.howto a:hover{
	color: #4d4d4d;
	text-decoration: underline;;
	
}