.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:8%; 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; }
.esbanner>nav.bar.dot>i.fa { margin:8px 0 15px 16px; font-size:16px; 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:#06c; }

.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:red; }
.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: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:200px; }
  /*  #b1.esbanner.fixhorg { height:288px; }*/
    .esbanner+.esbrmtxt { display:none; }
    .esbanner { width: calc(100% + 40px); margin-left: -20px;}


}