/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 980px) {
	div.mainbannerwrapper{position:relative;float:left;width:100%;height:744px;margin:-20px 0px 20px 0px;}
	div.mainbannerinitioff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;}
	div.mainbanner{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 1;transition: all 1s ease-out ;z-index:80;cursor:pointer;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: all  1s ease-out;}
	 /*background-size:100% 100%,background-size:120% 120%*/
	div.mainbannerwrapper:hover .mainbannerleftarrow,div.mainbannerwrapper:hover .mainbannerrightarrow{opacity:1; transition: opacity 0.5s ease-out;}

	/* Straight Arrow*/
	div.mainbannerleftarrow{position:absolute;left:0px;top:50%;  margin-top:-56px;z-index:82; opacity:0; transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a {display:block;width:102px;height:112px;background:url(../images/mainimg_left_arrow_on.png) center center;background-size: 100% 100%; opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:0px;top:50%; margin-top:-56px;z-index:82;opacity:0; transition: opacity 0.5s ease-out; }
	div.mainbannerrightarrow a {display:block;width:102px;height:112px;background:url(../images/mainimg_right_arrow_on.png) center center ;background-size: 100% 100%;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	
	/*Circle Ring
	div.mainbannerleftarrow{position:absolute;left:30px;top:50%;margin-top:-40px;z-index:82;opacity:0; transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a {display:block;width:80px;height:80px;background:url(../sys/ap_icons/main_icon_left_arrow_with_circle_ring_white.svg) center center;background-size: 100% 100%; opacity:0.6;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:30px;top:50%;margin-top:-40px;z-index:82; opacity:0; transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a {display:block;width:80px;height:80px;background:url(../sys/ap_icons/main_icon_right_arrow_with_circle_ring_white.svg) center center ;background-size: 100% 100%;opacity:0.6;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}*/

	div.mainbannertext{position:absolute; width:800px; min-height:100px; top:50%; margin-top:-50px; left:10%; font-size:16px; color:#FFF; padding:25px; background-color:#000; }
	div.mainbannertext strong{font-size:24px; font-weight:bold; color:#FFF;  display:block; padding:0px 0px 10px 0px; }

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 979px){
	div.mainbannerwrapper{position:relative;float:left;width:100%;height:300px;margin:0px 0px 20px 0px;}
	div.mainbanner{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 1;transition: opacity 0.5s ease-out;z-index:80;cursor:pointer;}
	div.mainbannerinitioff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: opacity 0.5s ease-out;}

	/* Straight Arrow */
	div.mainbannerleftarrow{position:absolute;top:50%; margin-top:-30px;left:0px;z-index:82; }
	div.mainbannerleftarrow a {display:block;width:40px;height:60px;background:url(../images/mainimg_left_arrow_on.png);background-repeat:no-repeat;background-position:center left;background-size:contain;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:0px;top:50%; margin-top:-30px;z-index:82;}
	div.mainbannerrightarrow a {display:block;width:40px;height:60px;background:url(../images/mainimg_right_arrow_on.png);background-repeat:no-repeat;background-position:center left;background-size:contain;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}

	/*Circle Ring
	div.mainbannerleftarrow{position:absolute;left:20px;top:50%;margin-top:-25px;z-index:82;}
	div.mainbannerleftarrow a {display:block;width:50px;height:50px;background:url(../sys/ap_icons/main_icon_left_arrow_with_circle_ring_white.svg) center center;background-size: 100% 100%; opacity:0.6;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:20px;top:50%;margin-top:-25px;z-index:82; }
	div.mainbannerrightarrow a {display:block;width:50px;height:50px;background:url(../sys/ap_icons/main_icon_right_arrow_with_circle_ring_white.svg) center center ;background-size: 100% 100%;opacity:0.6;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}*/
	
	div.mainbannertext{position:absolute; bottom:-74px; min-height:74px; left:0px; width:100%; font-size:14px; color:#FFF; padding:15px; background-color:#000; z-index:85; }
	div.mainbannertext strong{font-size:18px; font-weight:bold; color:#FFF;  display:block; padding:0px 0px 4px 0px; }


}

/* ==========================================================================
   Share CSS
   ========================================================================== */

.mainbannerimgpos1{background-position:center center;  } /*if change name, need to edit js file*/
.mainbannerimgpos2{background-position:center center;}
.mainbannerimgpos3{background-position:center center;}