html { height: 100%; }
.container { width: 100%; }



#nav { float: left; position: relative; width: 100%; font-size: 95%; }

#nav span { display: none; }


/*主選單*/
#nav > li { float: left; text-align: left; -moz-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; background-image: url(../image/icon/line_2.png); background-repeat: no-repeat; background-position: right center; background-color: #none; border-bottom-width: none; border-bottom-style: none; border-bottom-color: none; }




#nav > li > a { color: #FFF; display: block; line-height: 44px; /*text-transform: uppercase;*/ padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; }
#nav > li:hover > a {    background-color: #1d4e6d;    color: #FFFFFF;}
/*主選單滑鼠滑入效果速度*/
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -ms-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -o-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -webkit-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    white-space: normal;
}
/*主選單^^^*/




/*下拉區塊*/
#nav ul.subs { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #FFF; display: none; left: 0px; position: absolute; top: 44px; width: 96%; background-color: #24638c; padding-top: 15px; padding-right: 15px; padding-bottom: 25px; padding-left: 15px; }
#nav li:hover ul.subs  {  display: block; }

/*#nav li.active > a {    background-color: #333333;    color: #FFFFFF;}*/
/*#nav > a:hover { background-color: #FF0; color: #FFFFFF; }*/

/*第二層*/
#nav ul.subs > li { display: inline-block; float: none; vertical-align: top; width: 22%; border-right-width: 2px; border-right-style: solid; border-right-color: #266A97; padding-right: 1%; padding-bottom: 10px; padding-left: 1%; }
#nav ul.subs > li a { color: #FFF; line-height: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #69C; }
/*第二層標題字*/
#nav ul.subs > li > a { margin-bottom: 10px; color: #FFF; background-color: #235C83; padding: 5px; }

/*區塊內所有滑入字顏色*/
#nav ul li a:hover { color: #FF0; }



/*滑入速度*/
#nav ul.subs > li li { float: none; padding-left: 15px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; padding-top: 3px; padding-bottom: 3px; }

/**滑入移動距離*/
#nav ul.subs > li li a { color: #6CC; }
#nav ul.subs > li li a:hover { color: #FFF; }
#nav ul.subs > li li:hover {    padding-left: 22px;}



@media all and (max-width : 970px) {

#nav > li { background-color: #none; 
border-bottom-width: none; border-bottom-style: none; border-bottom-color: none;
}


#nav > li > a { color: #FFF; display: block; line-height: 44px; /*text-transform: uppercase;*/ padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; }

#nav ul.subs { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #FFF; display: none; left: 0px; position: absolute; top: 44px; width: 96%; background-color: #24638c; padding-top: 15px; padding-right: 15px; padding-bottom: 25px; padding-left: 15px; }
#nav li:hover ul.subs {  display: block;}

/*滑入速度*/
#nav ul.subs > li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; padding-top: 3px; padding-bottom: 3px; }

/**滑入移動距離*/
#nav ul.subs > li li a { color: #6CC; }
#nav ul.subs > li li a:hover { color: #FFF; }
#nav ul.subs > li li:hover {    padding-left: 12px;}

}




@media all and (max-width : 778px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
		background-image: none; background-repeat: no-repeat; background-position: right center;background-color: #256593;
		border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #66C;
		text-align:  center;
		
    }
	
#nav ul.subs > li li { text-align: left  ; }

	
    #nav ul.subs {
        position: relative;
        top: 0;
		width: 100%;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}