
  	.esbanner 				{ width:100%; background:#000; overflow:hidden; }
  	.esbanner>i.load 		{ color:#fff; position:absolute; font-size:48px; top:50%; left:50%; margin-top:-22px; margin-left:-22px; }
  	.esbanner>ul 			{ display:none; }
  	.esbanner.ready>i.load 	{ display:none; }
  	.esbanner>.br 			{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:200; background-repeat:no-repeat; background-position:center center; }
  	.esbanner>.br.nxt 		{ z-index:150; }
  	.esbanner>.br.cart 		{ z-index:150; }
  	.esbanner>.br.cart>.br 	{ display:inline-block; height:100%; 
                          		  background-repeat: no-repeat;
                          		background-position: center;}
  	.esbanner .br>.title 	{ background:rgba(0,0,0,0.8); color:#fff; font-size:24px; padding:10px 15px; 
                        	  position:absolute; top:20px; right:0; display:block; }
  	.esbanner .br>p 		{ background:rgba(0,0,0,0.6); color:#fff; font-size:12px; padding:10px 15px; 
                        	  position:absolute; bottom:0px; left:0; width:100%; text-align:left;
                        	  display:block; box-sizing:border-box; }                      

  	.esbanner.fixh100 .br 	{ background-size:auto 100%; }
 	 .esbanner.fixhorg .br 	{ background-size:auto auto; }
  	.esbanner.w100 .br 		{ background-size:100% 100%; }
  	.esbanner.w100>.br.sel 	{ position:relative; }
  	.esbanner.w100 .br>img 	{ opacity:0; width:100%; height:auto; }

  	.esbanner>.arw 				{ 	position:absolute; height:100%; width:5%; background:rgba(0,0,0,0.5); 
                  			  		top:0; z-index:500; cursor:pointer; display:none; opacity:0;
                   					transition:opacity 0.5s ease; }
  	.esbanner>.arw.left 		{ left:0; }                 
  	.esbanner>.arw.right 		{ right:0; }                 
  	.esbanner>.arw>i.fa 		{ position:absolute; top:50%; left:50%; color:#fff; font-size:36px; transform:translate(-50%,-50%); }
  	.esbanner>.arw:hover 		{ opacity:1; }                        
  	.esbanner.first>.arw.left 	{ display:none; }
  	.esbanner.last>.arw.right 	{ display:none; }
  	.esbanner.busy>.arw 		{ display:none; }
  	.esbanner.ready>.arw 		{ display:block; }

  	.esbanner>nav.bar 						{ position:absolute; left:0; width:100%; text-align:center; z-index:501; text-align:right; padding-right:25px }
  	.esbanner>nav.bar.dot>i.fa 				{ margin:24px 0 0 12px; font-size:18px; cursor:pointer; color:#fff; transition:color 0.5s ease; }
  	.esbanner>nav.bar.dot>i.fa:first-child 	{ margin-left:0; }
	.esbanner>nav.bar.dot>i.fa.sel 			{ color:#2196F3; }

  	.esbanner>nav.bar.line>b 		{ display:inline-block; height:8px; background:#fff; box-sizing:border-box; 
                              		 transition:background 0.5s ease; border-left:solid 1px #999; }
	.esbanner>nav.bar.line>b.sel 	{ background:#2196F3; }
  	.esbanner>nav.bar.line>b.handle { position:absolute; display:block; top:0; left:0; background:red;
                                      transition:left 0.5s ease; border-left:none; }

  	.esbanner+.esbrmtxt 		{ background:#000; color:#fff; padding:8px 10px; display:none; }
  	.esbanner+.esbrmtxt>.title 	{ font-size:24px; } 
  	.esbanner+.esbrmtxt>p 		{ font-size:12px; }
                                      
                                      
	/* specific adjustment for banner */
	#b1.esbanner.fixh100 { height:400px; }
	#b1.esbanner.fixhorg { height:400px; }


	/* ==========================================================================
	     Media Style: different height or other mobile adjustment
	============================================================================= */
	@media only screen and (max-width:1200px) {
  	.esbanner>nav.bar.dot>i.fa 	{ margin-top:20px}
	}

	@media only screen and (max-width:1000px) {
  	.esbanner>nav.bar.dot>i.fa 	{ margin-top:15px}
	.esbanner>nav.bar.dot>i.fa	{ font-size:16px; }
	.esbanner>.arw>i.fa			{ font-size:18px; padding:10px 15px;
								-webkit-border-radius: 5px;
								   -moz-border-radius: 5px;
										border-radius: 5px; }
	}
	
	@media only screen and (max-width:767px) {
	.esbanner>.arw 			{ width:10%; background:transparent; opacity:1; }
	.esbanner>.arw>i.fa 	{ background:rgba(0,0,0,0.5); }
	.esbanner.fixhorg .br 	{ background-size:cover; }
	      
	.esbanner .br>.title,.esbanner .br>p { display:none; }
	.esbanner+.esbrmtxt { display:block; }
	            
	#b1.esbanner.fixh100 { height:288px; }
	#b1.esbanner.fixhorg { height:288px; }

  	.esbanner>nav.bar.dot>i.fa 				{ margin-top:15px}

	}