/* • Hamburger Menu
   	------------------------------------------------------------------------- */
	#body .menu-m-blk    { display:none }


	/* • Nav
   	------------------------------------------------------------------------- */

	#body header ul.nav 						{ padding:0; margin:0; list-style-type:none; float:right; line-height:1.6;}
	#body header ul.nav li 						{ float:left; margin-top:52px }
	#body header ul.nav li a.top-l:before 		{ content:url('images/img-nav-dot.svg'); padding-right:8px}
	#body header ul.nav li a.tc 				{ padding-left:20px}
	#body header ul.nav li a.sc 				{ padding-left:20px; padding-right:30px}
	#body header ul.nav li a.lang 				{ padding-right:20px}
	#body header ul.nav li a 					{ padding:9px 14px; display:block; color:#666;  transition: all 0.3s ease-out;}
	#body header ul.nav li a:hover 				{ color:#ec2a74}
	#body header.smaller ul.nav li 		    	{ margin-top:20px}
	#body header.smaller ul.nav li ul li 		{ margin-top:0px}

	/* Submenu */
	#body header ul.nav ul 						{ position:absolute; display:block; list-style-type:none; max-height:0; overflow:hidden; 
													 -webkit-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
									                	-moz-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
									                	     box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);}
	#body header ul.nav li:hover 				{ position:relative; }
	#body header ul.nav li:hover ul 			{ padding:0px; max-height:999px;}
	#body header ul.nav li:hover ul li 			{ width:168px; display:block; background-color:#ececec;  transition: all 0.3s ease-out; } 
	#body header ul.nav li:hover ul li a 		{ padding:8px 20px 8px 34px;  border-top:1px solid #fff; }
	#body header ul.nav li:hover ul li:hover 	{ background:#ec2a74; }
	#body header ul.nav li:hover ul li:hover a  { color:#fff; }
	#body header ul.nav li ul li				{ margin-top:0px}


	#body #smlogo 					{ width:100%; padding-left:30px; top:8px; position: absolute; background-color:transparent;
									  opacity:0; transition: opacity 0.3s ease-out; }

	#body #smlogo img 				{ padding-left:0; width:auto; height:70px}
	#body header.smaller #smlogo 	{ opacity: 1}


	/* • Header
   	------------------------------------------------------------------------- */
	#body .logo-blk 		  { z-index:990;}
	#body .logo-blk .logo-pos { position:absolute; opacity:1; left:50px; top:-65px; width:20%;  transition: all 0.3s ease-out; }
	#body .logo-blk.smaller .logo-pos { opacity:0; }
	
	#body .banner-blk	{ margin-top:95px}
	
	#body header 		{ width:100%; height:95px; position:fixed; top:0; left:0; z-index:900; background-color:#fff;
					  	-webkit-transition: height 0.3s;
					  	   -moz-transition: height 0.3s;
					  		-ms-transition: height 0.3s;
					  		  -o-transition: height 0.3s;
					             transition: height 0.3s; }
  

  	#body header.smaller { 	height: 85px; 
	  						 -webkit-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
			                	-moz-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
			                	     box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12); }


	/* ==========================================================================
		Media Style
	============================================================================= */
	@media only screen and (max-width: 1150px) {

	#body .menu-m-blk				{ position:absolute; top:0px; right:30px; display:block;}
	#body .menu-m-blk .lang			{ float:left; padding-right:30px; padding-top:15px}

	#body .menu-btn     			{ top:0; background-color:#ececec; height:50px; display:table; }
	#body .menu-btn .menu-pos 		{ display: table-cell; vertical-align: middle; text-align: center; padding:0 20px }
	
		/* ===== same style (max-width:1108px & ipad portrait)  ====== */
		#body .banner-blk	 { margin-top:50px}
		#body header 		 { height:50px; }
		#body header.smaller { height:50px;}
		#body header ul.nav  { display:none}
		#body .logo-blk .logo-pos { left:20px; top:-38px; width:18%}
		/* =========================================================== */

	#body #smlogo 					{ padding-left:30px;  top:13px; }

	}

	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
	#body .menu-m-blk	    { display:none}

	#body header ul.nav li 			 { margin-top:30px }
	#body header ul.nav li:hover ul  { top:39px; }
	#body header ul.nav 			 { display:block}

	#body .banner-blk			{ margin-top:70px}
	#body header 				{ height:70px; }
	#body header.smaller 		{ height:60px;}
	#body .logo-blk .logo-pos 	{ left:30px; top:-35px; width:18%}
	#body #smlogo 					{ padding-left:20px;   }

	}

	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
		/* ===== same style (max-width:1108px & ipad portrait)  ====== */
		#body .banner-blk			{ margin-top:50px}
		#body header 				{ height:50px; }
		#body header.smaller 		{ height:50px;}
		#body header ul.nav 		{ display:none}
		#body .logo-blk .logo-pos 	{ left:20px; top:-35px; width:18%}
		/* =========================================================== */
	}


	@media only screen and (max-width: 745px) {
	#body .menu-m-blk     		{ right:15px;}
	#body .menu-btn .menu-pos 	{ padding:0 15px }

	#body header ul.nav 		{ display:none}
	#body .logo-blk .logo-pos   { left:20px; top:-38px; width:23%}

	#body #smlogo 		{ padding-left:20px; top:5px}
	#body #smlogo img   { width:auto; height:40px}

    }