@charset "utf-8";
/* CSS Document */

.menu-21-2{
	margin:0;
margin-top: -120px;
	height:134px;
	position:relative;
	z-index:2;
	background:url(../images/menu-21-1/bg.png) top center no-repeat;
}

@media (max-width: 575px) { 
	.menu-21-2{
		display:none;	
	}
 }
@media (min-width: 576px) and (max-width: 767px) { 
	.menu-21-2{
		display:none;	
	}
 }
@media (min-width: 768px) and (max-width: 991px) { 
	.menu-21-2{
		display:none;	
	}
 }
@media (min-width: 992px) and (max-width: 1199px) { 
	.menu-21-2{
		margin-top: -294px;
	}
 }
@media (min-width: 1200px) { ... }

.row-menu{
	float:left;
	margin-top:0px;
	width:100%;
	height:68px;
	position:relative;
	z-index:9999;
	}
#menu{
	float: left;
    position: relative;
       margin-top: 40px;
    width: 100%;
    height: 68px;
    z-index: 10000;
	   -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
		
	-webkit-backface-visibility: hidden; 
	-webkit-transform: translateZ(0);
	background:url(../images/menu/bg.png) top center no-repeat;
	}

#nav{
	margin: 0 auto;
    width: 1020px;
    position: relative;
    height: auto;
    /* background: url(../images/nav/nav_bg.png) repeat-x; */
    z-index: 9999
	
}

ul.top-level{
	    float: left;
    margin-left:15px;
    margin-top: 0px;
    width: 100%;
    height: 68px;

}

/**************************************/
ul.top-level li {
	    display: inline-block;
    /* border-right: #b8b8b8 1px solid; */
    padding-top: 11px;
    padding: 0px;
	    width: 138px;
    height: 68px;
    text-decoration: none;
    text-align: center;
   font:24px/40px 'thaisanslite', Arial, sans-serif;
    color: #532f04;
    background: url(../images/menu/line.png) top right no-repeat;
}
ul.top-level li:last-child{
    background: none;
}

ul.top-level li a{
	display:block;
	width:100%;
	color:#532f04;
	padding:0px;
	font:24px/40px 'THK2DJuly8', Arial, sans-serif;
	text-decoration:none;
	/*font-weight:bold;*
}
ul.top-level li a:hover{
	 font:24px/40px 'THK2DJuly8', Arial, sans-serif;
	color:#fbdb41;
	/*font-weight:bold;*/
	position:  relative;
	z-index:  99999;
	font-weight:  bold;
}
ul.top-level li.logo-headeer{
	width:110px;
	height:110px;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-55px;

}

/************************************************************************/
.sub {
       display: none;
    /* padding-top: 47px; */
    margin-top: -9px;
    padding-top: 73px;
    padding-bottom: 10px;
    min-height: 381px;
	position:relative;
	z-index:99;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

	.sub2{
   display: none;
   padding-bottom:35px;
   background:#666;
   min-height:200px;
	-webkit-box-shadow: 0px 9px 10px 0px rgba(50, 50, 50, 0.23);
	-moz-box-shadow:    0px 9px 10px 0px rgba(50, 50, 50, 0.23);
	box-shadow:         0px 9px 10px 0px rgba(50, 50, 50, 0.23);
	}
li:hover .sub {
   display: block;
    position: absolute;
	left:0; right:0;
	top:40px;
	z-index:9999;
	text-decoration:none;
	/*border-top:5px #d30cc1 solid;*/
	 height:200px;	
	}
	li:hover .sub2 {
    display: block;
    position: absolute;
	left:0; right:0;
	top:0px;
	z-index:9999;
	text-decoration:none;
	border-top:5px #d30cc1 solid;
	 height:200px;
	background: #fff url(images/menu/pic2.png) -10px 10px no-repeat;
	
	}
/*********************************************/
ul.sub-level{
	display:block;
	margin-top:10px;
	padding:0 20px;
	}
ul.sub-level li{
	position:relative;
	display:block;
	margin:0;
	padding:3px 0;
	margin-left:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:18px;
	text-align:left;
	border-right:none;
	color:#000;
	height:auto;
	background:none;
	width: 180px;
	}
ul.sub-level li a{
	padding:0;
	text-decoration:none;
	text-align:left;
	font-size:13px;
	color:#000;
	line-height:18px;
	font-family: Arial, Helvetica, sans-serif;
	height:auto;
	}
	ul.sub-level li a:hover{
	padding:0;
	text-decoration:none;
	color: #03552a;
	background: #FFC107;
	font-size:13px;
	line-height:18px;
	font-family: Arial, Helvetica, sans-serif;
	height:auto;
	}
/*********************************************/
ul.last-level{
	display:block;
	margin-top:0px;
	}
ul.last-level li{
	position:relative;
	display:block;
	padding:2px 0;
	 font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:18px;
	background:url(../images/nav/g-arrow.png) 103% 50% no-repeat;
	/*border-bottom:#c4aa59 1px solid;*/
	font-weight:none;
	height:auto;
	}
ul.last-level li:hover{
	text-decoration:none;
	font-weight:none;
	}
ul.last-level li a{
	text-decoration:none;
	padding:0;
	font-weight:none;
	 font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:18px;
	font-weight:0;
	height:auto;
	color:#000;
	}
ul.last-level li a:hover{
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:13px;
	 line-height:18px;
	 font-weight:0;
	 color: #0d4200;
	 /* background:#f3352a; */
	 height:auto;
	}