/* jssor slider bullet navigator skin 21 css */
        /*
        .jssorb21 div           (normal)
        .jssorb21 div:hover     (normal mouseover)
        .jssorb21 .av           (active)
        .jssorb21 .av:hover     (active mouseover)
        .jssorb21 .dn           (mousedown)
        */
        .jssorb21 {
            position: absolute;
            bottom: 26px;
            left: 6px;
        }
        .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
            position: absolute;
            /* size of bullet elment */
            width: 19px;
            height: 19px;
            text-align: center;
            line-height: 19px;
            color: white;
            font-size: 12px;
            background: url(../image/img/b21.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb21 div { background-position: -5px -5px; }
        .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
        .jssorb21 .av { background-position: -65px -5px; }
        .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
		
		
		
		
		/* jssor slider arrow navigator skin 21 css */
        /*
        .jssora21l                  (normal)
        .jssora21r                  (normal)
        .jssora21l:hover            (normal mouseover)
        .jssora21r:hover            (normal mouseover)
        .jssora21l.jssora21ldn      (mousedown)
        .jssora21r.jssora21rdn      (mousedown)
        */
        .jssora21l, .jssora21r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 55px;
            height: 55px;
            cursor: pointer;
            background: url(../image/img/a21.png) center center no-repeat;
            overflow: hidden;
        }
        .jssora21l { background-position: -3px -33px; top: 123px; left: 8px; }
        .jssora21r { background-position: -63px -33px; top: 123px; right: 8px; }
        .jssora21l:hover { background-position: -123px -33px; }
        .jssora21r:hover { background-position: -183px -33px; }
        .jssora21l.jssora21ldn { background-position: -243px -33px; }
        .jssora21r.jssora21rdn { background-position: -303px -33px; }
		
		<!-- --------------Nav Menu Thong--------------- -->
		* {
		     margin:0;
			 padding:0;
	     }
		 
		 header {
		     width: 100%;
			 height: 50px;
			 margin: auto;
			 border-bottom: 1px solid #EEE;
			 background: #FFF;
			 z-index: 99;
			 padding: 0 0 0 5px;
		 }
		 #brand {
		     float: left;
			 line-height: 50px;
			 color: #E5DAC0;
			 font-size: 30px
			 font-weight: bolder;
		 }
		
		body { font-family: sans-serif;}
		 a { text-decoration: none; color: #00A5CC; font-size: 0.8em;}
		 li { list-style-type: none;}
		
	     
		 nav {
		     width: 100%; 
			 text-align: center;			 
		 }
		 nav ul {
		     line-height: 30px;
		 }
		 nav li {
		     display: inline-block;		 
		 }
		 nav a {
		     padding: 10px;
			 color: rgba(240,240,240,1);
		 }
		 nav a:hover {
		     background: rgba(0,0,0,0.4); 
			 color: rgba(255,255,255,1); 
			 border-radius:2px;
		 }
		 <!-- /*--------------------------------------*/  -->
		 .menu {
		     width:100%;
			 height: 60px;
			 background: rgba(240,240,240,0.2);
			 position: absolute;
			 top: 10px;"
			 transition: all .9s ease-in-out;
			 -webkit-transition: all .9s ease-in-out;
			 -moz-transition: all .9s ease-in-out;
			 -ms-transition: all .9s ease-in-out;
			 -o-transition: all .9s ease-in-out;
			 z-index: -1;
			 
		 }
			 
		 .menu-icon {
		     float: absolute;
			 top: 10px;
			 padding: 10px 20px;
			 background: #E5DAC0;
			 color: rgba(0,0,0,1);
			 cursor: pointer;
			 border-radius: 5px;
			 margin: 5px 5px 0 0;
			 z-index: 99;
			 display: none;
		 }
		 .menu-icon:hover { color: #F5F5F5; }
		 #menuToggle {
		     display: ;
		 }
		 #menuToggle:checked ~.menu { position: absolute; top: 10px; }
		 

		 
		 <!-- /*--------------------------------------*/ -->	 
		 
		 <!-- ----------------------------------------- -->