/*------------------------------------*\
        $Common CSS CONTENTS
\*------------------------------------*/
/*
     * Common.........................
     * SEO Adjust
     * Title Block
     * Space
     * Layout
     * Button Style
     * Animation Effect
     * Media Query....................

*/


/*------------------------------------
            $Common
------------------------------------*/
.rl-style h1,.rl-style h2,.rl-style h3,.rl-style h4,.rl-style p{margin: 0;}
html{font-size: 16px;}
body {
	font-family:'Roboto', sans-serif; font-weight: 300;
	font-size: 1rem;
	/* padding-top: 59px; */
}
#topnavarea.affix{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#topnavarea.affix-top{
    display: block;
}
.container-fluid{padding: 0;}
    .rl-row-1440{
        max-width: 1440px; 
        margin: 0 12.1%;
        padding-right: 15px;
        padding-left: 15px;
    } 

    /*-----Topbar Font Size-----*/
    .rl-style nav p, .rl-style nav li, .rl-style nav a{font-size: 1rem; line-height: 20px;}    
    .rl-style nav p, .rl-style nav ul{margin-bottom: 0px;}
    
    /*-----Footer Font Size-----*/
    .rl-style footer a{font-size: 0.875rem;}

    /*-----Font Size-----*/
    .rl-style h1{font-size: 5.25rem;}
    .rl-style h2{
        color: #282828; 
        font-size: 3rem; 
        line-height:1; 
        margin-bottom: 40px;
    }
    .rl-style h3{
        color: #333333; 
        font-size: 2.25rem; 
        line-height:1.2; 
        margin-bottom: 40px;
    }
    .rl-style h4{
        color: #393939; 
        font-size: 1.875rem; 
        font-weight: bold; 
        margin-top: 30px ;
        margin-bottom: 20px;
    }
    .rl-style p,.rl-style li{font-size: 1.125rem; color: #333333; line-height: 1.5;}    
    .rl-style p,.rl-style ul{margin-bottom: 20px;}
    @media screen and (max-width: 1199px){
        .rl-style h2,
        .rl-style h3{margin-bottom: 35px;}
        .rl-style h4{margin-top: 25px;margin-bottom: 15px;}
        .rl-style p,.rl-style ul{margin-bottom: 15px;}
    }
    @media screen and (max-width: 991px){
        .rl-style h2,.rl-style h3{margin-bottom: 25px;}
    }
    @media screen and (max-width: 767px){
        .rl-style h2{font-size: 2.5rem;}
        .rl-style h2,.rl-style h3{margin-bottom: 20px;}
    }
    @media screen and (max-width: 500px){
        .rl-style h2{font-size: 2.25rem;}
        .rl-style h3{font-size: 1.75rem;}
        .rl-style h4{font-size: 1.5rem;}
    }   
    
    @font-face {
      font-family: 'BebasNeueBold';
      src: url('../fonts/BebasNeueBold.eot');
      src: url('../fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
           url('../fonts/BebasNeueBold.woff2') format('woff2'),
           url('../fonts/BebasNeueBold.woff') format('woff'),
           url('../fonts/BebasNeueBold.ttf') format('truetype'),
           url('../fonts/BebasNeueBold.svg#BebasNeueBold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    /*-----Title Style-----*/
    h2.title, h3.title, h4.title{ font-weight: 300; }

    /*-----Link Style-----*/
    .rl-style a{font-size: 1.125rem; color: #42D365;}
    .rl-style a:hover{color:#42D365;}
    .rl-style a:focus,
    .rl-style a:active,
    .rl-style a:active:focus{color:#42D365; outline: none;}

    .footer a:hover{color:#42D365 !important;}

    /*-----Background Color-----*/
    .bg-color-black{background-color: #000;}
    .bg-color-white{background-color: #fff;}
    .bg-color-gray{background-color: #3b3b3b;}
    .bg-color-lightgray{background-color: #eeeeee;}
    .bg-color-feature-black{background-color: #282828;}
    .bg-color-feature-lightblack{background-color: #3d3d3d;}
    .bg-color-feature-lightgray{background-color: #e8e8e8}





/*------------------------------------
            $SEO Adjust
------------------------------------*/
/*new seo h1-h4 class*/
    .rl-style .text-lg,.rl-style .text-md,.rl-style .text-sm,.rl-style .text-xs{margin: 0;}

/*-----Font Size-----*/
    .rl-style .text-lg{ font-size: 5.25rem; line-height: 1.1;}
    .rl-style .text-md{
        color: #282828; 
        font-size: 3rem; 
        line-height:1; 
        margin-bottom: 40px;
    }
    .rl-style .text-sm{
        color: #333333; 
        font-size: 2.25rem; 
        line-height:1.2; 
        margin-bottom: 40px;
    }
    .rl-style .text-xs{
        color: #393939; 
        font-size: 1.875rem; 
        font-weight: bold;
        line-height: 1.1; 
        margin-top: 30px ;
        margin-bottom: 20px;
    }
    @media screen and (max-width: 1199px){
        .rl-style .text-md,
        .rl-style .text-sm{margin-bottom: 35px;}
        .rl-style .text-xs{margin-top: 25px;margin-bottom: 15px;}
    }
    @media screen and (max-width: 991px){
        .rl-style .text-md,.rl-style .text-sm{margin-bottom: 25px;}
    }
    @media screen and (max-width: 767px){
        .rl-style .text-md{font-size: 2.5rem;}
        .rl-style .text-md,.rl-style .text-sm{margin-bottom: 20px;}
    }
    @media screen and (max-width: 500px){
        .rl-style .text-md{font-size: 2.25rem;}
        .rl-style .text-sm{font-size: 1.75rem;}
        .rl-style .text-xs{font-size: 1.5rem;}
    }   

/*-----Title Style-----*/
    .text-lg.title{ font-weight: 500; }
    .text-md.title, .text-sm.title, .text-xs.title{ font-weight: 300; }
    
    /*----- 在 $Title Block 還有 $SEO -----*/




    
/*------------------------------------
            $Title Block
------------------------------------*/
    .rl-declareBoard-header{
        -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.15);
        -webkit-background-size: cover;
        background-size: cover;
    }
    .rl-declareBoard-header .title {
        color: #42D365;
        font-size: 4.5rem;
        font-family: 'BebasNeueBold',sans-serif;
        text-align: center;
        margin: 0;
        padding-right: 15px;
        padding-left: 15px;
    }


    .rl-declareBoard-common{
        background-image: url();
        background-attachment: fixed;
    }
    .rl-declareBoard .title{
        font-weight: 300;
        text-align: left;
    }
        /*.rl-declareBoard h2.title{ 
            text-align: center; 
            margin: 0;
            padding-right: 15px;
            padding-left: 15px; 
        }*/
        /*----- $SEO -----*/
        .rl-declareBoard .text-md.title{ 
            text-align: center; 
            margin: 0;
            padding-right: 15px;
            padding-left: 15px; 
        }

        .rl-declareBoard .underline{ 
            border-bottom: 2px solid #828282;
            display: block;
            /*max-width: 1410px;*/
            /*margin: 0 13.7%;*/
        }
    
    .rl-declare-label{
        position: relative;
        padding-right: 180px;
    }
        




/*------------------------------------
            $Space
------------------------------------*/
    
    /*-----padding-----*/
    .rl-wrapper-topbottom-l{padding-top: 80px;padding-bottom: 80px}
    .rl-wrapper-top-l{padding-top: 80px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 80px;}

    .rl-wrapper-topbottom{padding-top: 60px;padding-bottom: 60px}
    .rl-wrapper-top{padding-top: 60px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 60px;}

    .rl-wrapper-topbottom-s{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top-s{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 40px;}

    .rl-wrapper-topbottom-xs{padding-top: 20px;padding-bottom: 20px}
    .rl-wrapper-top-xs{padding-top: 20px;padding-bottom: 0;}
    .rl-wrapper-bottom-xs{padding-top: 0;padding-bottom: 20px;}
    
    
    /*-----margin-----*/
    .rl-margin-topbottom-l{margin-top: 80px;margin-bottom: 80px}
    .rl-margin-top-l{margin-top: 80px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 80px;}

    .rl-margin-topbottom{margin-top: 60px;margin-bottom: 60px}
    .rl-margin-top{margin-top: 60px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 60px;}

    .rl-margin-topbottom-s{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top-s{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 40px;}
    
    .rl-margin-topbottom-xs{margin-top: 20px;margin-bottom: 20px}
    .rl-margin-top-xs{margin-top: 20px;margin-bottom: 0;}
    .rl-margin-bottom-xs{margin-top: 0;margin-bottom: 20px;}
    
    .no-padding-l{padding-left: 0;}
    .no-padding-r{padding-right: 0;}
    .no-padding-lr{padding-left: 0;padding-right: 0;}
    .no-padding-top{padding-top: 0;}
    .no-padding-bottom{padding-bottom: 0;}
    .no-padding{padding: 0;}





/*------------------------------------
            $Layout
------------------------------------*/
    .hidden{display: none !important;}
    .display-none { display: none; }
    .display-inline-block{ display: inline-block; }
    
    .text-center{text-align: center;}
    .text-right{text-align: right;}
    .text-left{text-align: left;}

    .rl-position-rel{position: relative;}

    
    /*-----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;
    }
    
    /*-----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;
            
    }
    .flex-direction-row{
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .flex-direction-column{
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    /*.flex > *{ max-width: 100%; } /*For IE10 */





/*------------------------------------
        $Button Style
------------------------------------*/
	/*default button 1 with fill bg*/
	.rl-btn-fill{
		background-color: #42D365;
        border: 2px solid #42D365;
        color: black;
        line-height: normal;
        font-size: 16px;
        border-radius: 0; 
         transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out; 
	}
	.rl-btn-fill:hover, 
    .rl-btn-fill:focus, 
    .rl-btn-fill:active, .rl-btn-fill:active:focus{
        background-color: transparent;
        color: #42D365;
        outline:none;
    }

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





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





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

@media screen and (max-width: 1199px){
    /*-----space-----*/
    .rl-wrapper-topbottom-l{padding-top: 60px;padding-bottom: 60px}
    .rl-wrapper-top-l{padding-top: 60px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 60px;}

    .rl-wrapper-topbottom{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 40px;}
    
    .rl-wrapper-topbottom-s{padding-top: 25px;padding-bottom: 25px}
    .rl-wrapper-top-s{padding-top: 25px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 25px;}      

    .rl-wrapper-topbottom-xs{padding-top: 15px;padding-bottom: 15px}
    .rl-wrapper-top-xs{padding-top: 15px;padding-bottom: 0;}
    .rl-wrapper-bottom-xs{padding-top: 0;padding-bottom: 15px;}
    


    .rl-margin-topbottom-l{margin-top: 60px;margin-bottom: 60px}
    .rl-margin-top-l{margin-top: 60px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 60px;}

    .rl-margin-topbottom{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 40px;}

    .rl-margin-topbottom-s{margin-top: 25px;margin-bottom: 25px}
    .rl-margin-top-s{margin-top: 25px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 25px;}

    .rl-margin-topbottom-xs{margin-top: 15px;margin-bottom: 15px}
    .rl-margin-top-xs{margin-top: 15px;margin-bottom: 0;}
    .rl-margin-bottom-xs{margin-top: 0;margin-bottom: 15px;}

}

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

@media screen and (max-width: 767px){
    /*-----space-----*/
    .rl-wrapper-topbottom-l{padding-top: 40px;padding-bottom: 40px}
    .rl-wrapper-top-l{padding-top: 40px;padding-bottom: 0;}
    .rl-wrapper-bottom-l{padding-top: 0;padding-bottom: 40px;}

    .rl-wrapper-topbottom{padding-top: 30px;padding-bottom: 30px}
    .rl-wrapper-top{padding-top: 30px;padding-bottom: 0;}
    .rl-wrapper-bottom{padding-top: 0;padding-bottom: 30px;}

    .rl-wrapper-topbottom-s{padding-top: 20px;padding-bottom: 20px}
    .rl-wrapper-top-s{padding-top: 20px;padding-bottom: 0;}
    .rl-wrapper-bottom-s{padding-top: 0;padding-bottom: 20px;}  
    


    .rl-margin-topbottom-l{margin-top: 40px;margin-bottom: 40px}
    .rl-margin-top-l{margin-top: 40px;margin-bottom: 0;}
    .rl-margin-bottom-l{margin-top: 0;margin-bottom: 40px;}
    
    .rl-margin-topbottom{margin-top: 30px;margin-bottom: 30px}
    .rl-margin-top{margin-top: 30px;margin-bottom: 0;}
    .rl-margin-bottom{margin-top: 0;margin-bottom: 30px;}

    .rl-margin-topbottom-s{margin-top: 20px;margin-bottom: 20px}
    .rl-margin-top-s{margin-top: 20px;margin-bottom: 0;}
    .rl-margin-bottom-s{margin-top: 0;margin-bottom: 20px;}

}

@media screen and (max-width: 500px){
    .rl-row-1440{
        padding-right: 0;
        padding-left: 0;
    }
    .rl-declareBoard .underline{ /*margin: 0 15px;*/ }
}