#hpspbnr { width:100%; background:#000; overflow:hidden;  height:350px; background-size:100% 100%; 
            display:none;}
#hpspbnr>em.load { color:#fff; position:absolute; font-size:48px; top:50%; left:50%; 
                    margin-top:-22px; margin-left:-22px; }
#hpspbnr>ul { display:none; }
#hpspbnr.ready>em.load { display:none; }
#hpspbnr>.br { position:absolute; top:0; left:0; width:100%; height:100%; z-index:200;
                background-repeat:no-repeat; background-position:right top; }
#hpspbnr>.br.nxt { z-index:150; }
#hpspbnr>.br.cart { z-index:150; }
#hpspbnr>.br.cart>.br { display:inline-block; height:100%; 
                        background-repeat:no-repeat; background-position:center;}
#hpspbnr .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; }
#hpspbnr .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; }                      

#hpspbnr>.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; }
#hpspbnr>.arw.left { left:0; background-image:url(/images/esbr-prev.svg); }
#hpspbnr>.arw.right { right:0; background-image:url(/images/esbr-next.svg); }
#hpspbnr>.arw>* { position:absolute; top:50%; left:50%; color:#fff; font-size:36px; 
                       transform:translate(-50%,-50%); }
#hpspbnr>.arw:hover { opacity:1; }                        
#hpspbnr.first>.arw.left { display:none; }
#hpspbnr.last>.arw.right { display:none; }
#hpspbnr.busy>.arw { display:none; }
#hpspbnr.ready>.arw { display:block; }

#hpspbnr>nav.bar { position:absolute; left:0; width:100%; text-align:center; z-index:501;  }
#hpspbnr>nav.bar>p { display:inline-block; width:20px; height:20px; background:#fff; position:relative; 
                      transform:translateY(50%); }
#hpspbnr>nav.bar>p>em.fa { font-size:12px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#hpspbnr>nav.bar.dot>* {  margin:30px 0 0 8px;  cursor:pointer; display:inline-block; }
#hpspbnr>nav.bar.dot>em { background:#fff; transition:background 0.5s ease; width:5%; height:5px; }
#hpspbnr>nav.bar.dot>em:first-child { margin-left:0; }
#hpspbnr>nav.bar.dot>em.sel { background:red; }

#hpspbnr>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; }
#hpspbnr>nav.bar.line>em.sel { background:red; }
#hpspbnr>nav.bar.line>em.handle { position:absolute; display:block; top:0; left:0; background:red;
                                    transition:left 0.5s ease; border-left:none; }

#hpspbnr .br>div.box { color:#fff; position:absolute; bottom:100px; left:100px; font-size:180%;
                        z-index:220; opacity:0; /*transform:translateX(-100%);*/
                        transition:all 0.8s ease-out; }   
#hpspbnr .br>div.box.on { opacity:1; /*transform:translateX(0);*/}                        
#hpspbnr .br>a.actbtn { text-decoration:none; padding:10px 20px; background:rgba(0,0,0,0.7); 
                        top:20px; right:20px; z-index:225; position:absolute; color:#fff; 
                        border:solid 1px #fff; }
#hpspbnr .br>div.f { position:absolute;  z-index:210; transition:all 0.5s cubic-bezier(0, 0, 0.78, 1); }
#hpspbnr .br>div.f>svg { height:100%; }
#hpspbnr .br.br0>div.f { height:100%; }
#hpspbnr .br.br0>div.f>svg path { fill:#C31F26; stroke:#C31F26; }
#hpspbnr .br.br1>div.f { height:120%; }
#hpspbnr .br.br1>div.f>svg path { fill:#fff; stroke:#fff; }
#hpspbnr .br.br1>div.box { color:#C31F26; }
#hpspbnr .br.br2>div.f { height:60%; }
#hpspbnr .br.br2>div.f>svg path { fill:#C31F26; stroke:#C31F26; }
#hpspbnr .br.br3>div.f { height:60%; }
#hpspbnr .br.br3>div.f>svg path { fill:#C31F26; stroke:#C31F26; }
#hpspbnr .br.br4>div.f { height:60%; }
#hpspbnr .br.br4>div.f>svg path { fill:#C31F26; stroke:#C31F26; }
#hpspbnr .br.br5>div.f { height:60%; }
#hpspbnr .br.br5>div.f>svg path { fill:#fff; stroke:#fff; }
#hpspbnr .br.br5>div.box { color:#C31F26; }
                                    
#hpspbnr+.esbrmtxt { background:#000; color:#fff; padding:8px 10px; display:none; }
#hpspbnr+.esbrmtxt>.title { font-size:24px; } 
#hpspbnr+.esbrmtxt>p { font-size:12px; }
                                    
#hpspbnr>.close { height:10%; position:absolute; top:30px; left:30px; z-index:230; cursor:pointer; }     
                
#hpspbnr>.svghtm { display:none; }
/* ==========================================================================
    Media Style: different height or other mobile adjustment
============================================================================= */
@media only screen and (max-width:767px) {
    #hpspbnr { }
    #hpspbnr>.arw { width:10%; opacity:1; }
    #hpspbnr.fixhorg .br { background-size:cover; }
    
    #hpspbnr .br>.title,#hpspbnr .br>p { display:none; }
    #hpspbnr+.esbrmtxt { display:block; }
    #hpspbnr+.esbrmtxt.empty { display:none; }

    
    #hpspbnr>.close { top:20px; left:20px; }
    #hpspbnr>nav.bar.dot>* { margin-top:20px; }
    #hpspbnr .br>div.box { bottom:20px; left:20px;  }
}