.banner-wrp{
	width: 100%;
	padding-bottom: calc(100% / 1710 * 650);
}
.main .esbanner { position: absolute; left: 0; top: 0; height: 100%; width:100%; background:transparent; overflow:hidden; }
.main .esbanner>i.load { color:#fff; position:absolute; font-size:48px; top:50%; left:50%; 
                    margin-top:-22px; margin-left:-22px; }
.main .esbanner>ul { display:none; }
.main .esbanner.ready>i.load { display:none; }
.main .esbanner>.br { position:absolute; top:0; left:0; width:100%; height:100%; z-index:200;
                background-repeat:no-repeat; background-position:center center; cursor: pointer; }
.main .esbanner>.br.nxt { z-index:150; }
.main .esbanner>.br.cart { z-index:150; }
.main .esbanner>.br.cart>.br { display:inline-block; height:100%; 
                        background-repeat:no-repeat; background-position:center;}
						
.main .esbanner .br>.txt-wrp { background:#f9f6f1; color:#666; font-size:0.85em; padding:20px 50px; 
                      position:absolute; bottom:0px; left:0; width:50%; text-align:left;
                      display:block; box-sizing:border-box; height: 250px; border-top-right-radius: 5vw; }     
.main .esbanner .br>.txt-wrp .title { font-size:2.6em; font-weight: bold; letter-spacing:-0.8; line-height:1 }					  

.main .esbanner.fixh100 .br { background-size:cover }
.main .esbanner.fixhorg .br { background-size:auto auto; }
.main .esbanner.w100 .br { background-size:100% 100%; }
.main .esbanner.w100>.br.sel { position:relative; }
.main .esbanner.w100 .br>img { opacity:0; width:100%; height:auto; }

.main .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; }
.main .esbanner>.arw.left { left:0; }                 
.main .esbanner>.arw.right { right:0; }                 
.main .esbanner>.arw>i.fa { position:absolute; top:50%; left:50%; color:#fff; font-size:36px; 
                        transform:translate(-50%,-50%); }
.main .esbanner>.arw:hover { opacity:1; }                        
.main .esbanner.first>.arw.left { display:none; }
.main .esbanner.last>.arw.right { display:none; }
.main .esbanner.busy>.arw { display:none; }
.main .esbanner.ready>.arw { display:block; }
.main .esbanner .line.bar:after{ display: none; }
.main .esbanner>nav.bar {
	z-index:501; 
	position: absolute;
	bottom: auto !important;
	right: 150px;
	top: 50%;
	transform: translate(0%,-50%);
	width: auto; 
	height: auto;
}
.main .esbanner>nav.bar.dot:after{
	display: block;
	clear: both;
	position: relative;
	content: '';
}
.main .esbanner>nav.bar.dot>i.fa {
	width: 20px;
    margin-right: 5px;
    height: 3px;
    color: #fff;
    border-radius: 20%;
    display: block;
    float: left;	
}
.main .esbanner>nav.bar.dot>i.fa.sel { color: #666; }

.main .esbanner>nav.bar.line>.b-bg { 
	display: block;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background 0.5s ease;
    margin-bottom: 20px;
    cursor: pointer;
}
.main .esbanner>nav.bar.line>.b-bg[role='button']:focus { outline: 1px solid #333; }
.main .esbanner>nav.bar.line>.b-bg.sel { background: #666; }
.main .esbanner>nav.bar.line>.b-bg.handle { position:absolute; display:block; top:0; left:0; 
                                    transition:left 0.5s ease; border-left:none; background:#e84124;  }

.main .esbanner+.esbrmtxt { background:#000; color:#fff; padding:8px 10px; display:none; }
.main .esbanner+.esbrmtxt>.title { font-size:24px; } 
.main .esbanner+.esbrmtxt>p { font-size:12px; }
                                    
                                    
/* specific adjustment for banner */
#b1.esbanner.fixh100 { height:100%; }
#b1.esbanner.fixhorg { height:100%; }

/* */
.ct { font-size:120%; margin-top:5px}

/* ==========================================================================
    Media Style: different height or other mobile adjustment
============================================================================= */
@media only screen and (max-width:1600px) {
	.main .esbanner>nav.bar 		{ right:100px;}
	}
@media only screen and (max-width:1400px) {
	.main .esbanner>nav.bar			{ right:50px;}
}
@media only screen and (max-width:1024px) {
	.main .esbanner .br>.txt-wrp .ct{ font-size: 1em; }     
	.main .esbanner .br>.txt-wrp .title { font-size:1.5em; }	
	.main .esbanner>nav.bar			{ right:30px;}
}
@media only screen and (max-width:768px) {
.main .esbanner .br>.txt-wrp {
	padding-left: 20px;
	padding-right: 20px;
	width: 70%;
	height: 200px;
}
}
@media only screen and (max-width:767px) {
    .main .esbanner>.arw { width:10%; background:transparent; opacity:1; }
    .main .esbanner>.arw>i.fa { background:rgba(0,0,0,0.5); }
    .main .esbanner.fixhorg .br { background-size:cover; }
    
	.main .esbanner>nav.bar			{ right:20px;}
    .main .esbanner .br>.title,.main .esbanner .br>p { display:none; }
    .main .esbanner+.esbrmtxt { display:block; }
    
	.main .esbanner .br>.txt-wrp{ width: 100%; border-top-right-radius: 0; }
	
	.main .esbanner>nav.bar.line>.b-bg { 
		width: 12px;
		height: 12px;
		margin-bottom: 10px;
	}
			
}