.esbanner { width:100%; background:#000; overflow:hidden; }
.esbanner>em.load { color:#fff; position:absolute; font-size:48px; top:50%; left:50%; 
                    margin-top:-22px; margin-left:-22px; }
.esbanner>ul { display:none; }
.esbanner.ready>em.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-repeat:no-repeat;
                 background-color:rgba(0,0,0,0.5);  background-position:center center;
                 top:0; z-index:500; cursor:pointer; display:none; opacity:0;
                 transition:opacity 0.5s ease; background-size:40% auto; }
.esbanner>.arw.left { left:0; background-image:url(/images/esbr-prev.svg); }
.esbanner>.arw.right { right:0; background-image:url(/images/esbr-next.svg); }
.esbanner>.arw>* { 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>p { display:inline-block; width:20px; height:20px; background:#fff; position:relative; 
                      transform:translateY(50%); }
.esbanner>nav.bar>p>em.fa { font-size:12px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.esbanner>nav.bar.dot>* { margin:8px 0 8px 8px; cursor:pointer; display:inline-block; }
.esbanner>nav.bar.dot>em { background:#fff; transition:background 0.5s ease; width:20px; height:20px; border-radius:11px; }
.esbanner>nav.bar.dot>em:first-child { margin-left:0; }
.esbanner>nav.bar.dot>em.sel { background:red; }

.esbanner>nav.bar.line>em { 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>em.sel { background:red; }
.esbanner>nav.bar.line>em.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 */
#toprollbnr.esbanner.fixh100 { height:350px;}
#toprollbnr.esbanner.fixh100 .br{ background-position:right top; }
#toprollbnr.esbanner>nav.bar.dot>* { margin:0 0 30px 8px; }
#toprollbnr.esbanner>nav.bar.dot>p { margin-right:20px; width:30px; height:30px; }
#toprollbnr.esbanner>nav.bar.dot>p>em.fa { font-size:14px; }
#toprollbnr.esbanner>nav.bar.dot>em { width:5%; height:5px; border-radius:0;  }
#toprollbnr.esbanner .br>div.box { background:rgba(0,0,0,0.8); padding:25px; color:#fff;
                                    position:absolute; top:30px; }
#toprollbnr.esbanner .br>div.box.left { left:30px; }                                    
#toprollbnr.esbanner .br>div.box.right { right:30px; }
#toprollbnr.esbanner .br>div.box>h3 { margin:0; font-size:220%; font-weight:300; }
#toprollbnr.esbanner .br>div.box>div.btns { margin-top:20px; }
#toprollbnr.esbanner .br>div.box>div.btns>a.act { display:inline-block; padding:8px; color:#fff;
                                                    background:rgba(0,0,0,0.7); 
                                                    border:solid 1px #fff; text-decoration:none; }

#b1.esbanner.fixh100 { background-size:100% 100%;  }
#b1.esbanner.fixhorg { height:400px; }

/* ==========================================================================
    Media Style: different height or other mobile adjustment
============================================================================= */
@media only screen and (max-width:767px) {
    .esbanner>.arw { width:10%; opacity:1; }
    .esbanner.fixhorg .br { background-size:cover; }
    
    .esbanner .br>.title,.esbanner .br>p { display:none; }
    .esbanner+.esbrmtxt { display:block; }
    .esbanner+.esbrmtxt.empty { display:none; }
        
    #b1.esbanner.fixh100 { height:288px; }
    #b1.esbanner.fixhorg { height:288px; }
    
    #toprollbnr.esbanner .br>div.box { display:none; }
}