#body .img-scale													{ width:100%; }
	#body .main-wrapper 												{ width:100%; max-width:1280px; margin:0 auto; position:relative; }
	
	#body .main-wrapper .br-ot-wrapper								{ width:100%; overflow:hidden; }
	#body .main-wrapper .br-wrapper:after 							{ clear:both; content:""; position:relative; display: block; }
	
	#body .br-ot-wrapper .ot-bg										{ position:absolute; left:0; /*top:0px;*/ top:8px; width:100%; height:calc(100% - 50px); }	
    #body.cn .br-ot-wrapper .ot-bg									{ position:absolute; left:0; /*top:0px;*/ top:10px; width:100%; height:calc(100% - 50px); }	
	#body .br-ot-wrapper .ot-bg .ot-bg-img							{ width:100%; height:100%; background:#000; position:absolute; top:0; left:0; opacity:0; transition:opacity 1s; }
	#body .br-ot-wrapper .ot-bg .ot-bg-img img						{ width:100%; }
	
	#body .br-wrapper .br-item										{ padding:80px 0 50px 0; margin-top:-80px; overflow:hidden; z-index: 1; float: left; display:inline-block; }
	
	#body .br-item .bg-img											{ width:100%;opacity:0; }
	#body .br-item .bg-img img										{ width:100%; }
	#body .br-item .inner-wrapper 									{ padding: 0 50px; position:absolute; top:0; left:0; height:100%; width: calc(100% - 100px); }
	#body .br-item .inner-wrapper .of-wrapper						{ margin: 80px 0 50px 0; display:block; /*height:calc(100% - 130px);*/ height:calc(100% - 122px); overflow:hidden; }
    #body.cn .br-item .inner-wrapper .of-wrapper					{ margin: 80px 0 50px 0; display:block; /*height:calc(100% - 130px);*/ height:calc(100% - 120px); overflow:hidden; }
	#body .br-item .svgMask 											{ display:inline-block; position:absolute; }
	#body .br-item .svgMask-1										{ top:30px; left:50px; }
	#body .br-item .svgMask-2										{ bottom:20px; right:50px; width:23%; padding-bottom:calc(23% / 758 * 824);}
	#body .br-item .big-bubble										{ width: 100%; height:100%; top:0; left:0; position:absolute;  }
	#body .br-item .animate-title 									{ position:absolute; bottom:0px; left:2%; width:60%; }
	
	#body .br-item .animate-title  img								{ width:100%; }
	
	#body .marquee 													{ overflow: hidden;  font-size: 0px;}
	#body .shop-list 												{ padding:30px 0px; margin-top:-50px; background-color:#ececec; }
	#body .shop-list .shop-list-item									{ display:inline-block; height:100%; vertical-align: middle; padding-right:60px; }
	#body .shop-list .shop-list-item	img								{ max-height:90px; max-width:250px; } 
	
	#body .str3 .str_item {
		font-size:0;
		line-height:0
	}
	
	#body .shop-list .group{
		display: inline-block;
	}

    #body .svgmask-img, #body .svgmask-mask{
		width:100%;
		height:100%;
	}
	
	/* animation */
	
	
	#body .br-ot-wrapper.ie9orlower .br-item.standby .animate-title 		{ opacity:0; transition: opacity 0s ease-out 0s; }
	/* #body .br-ot-wrapper.ie9orlower .br-item.animations .animate-title 	{ opacity:1; transition: opacity 0.3s ease-out 0.9s;  } */
	#body .br-ot-wrapper.ie9orlower .br-item.animations .animate-title 	{ opacity:1; transition: opacity 0.3s ease-out 0s;  }
	
	
	#body .br-ot-wrapper.others .br-item.standby .animate-title 		{ opacity:0; transform:  translate(-400px , 400px); transition: opacity 0s ease-out 0s,transform 0s ease-out 0s; }
	/* #body .br-ot-wrapper.others .br-item.animations .animate-title 	{ opacity:1; transform:  translate(0px , 0px); transition: opacity 0.3s ease-out 0.9s ,transform 0.35s ease-out 0.7s;  } */
	#body .br-ot-wrapper.others .br-item.animations .animate-title 	{ opacity:1; transform:  translate(0px , 0px); transition: transform 0.35s ease-out 0.2s;  }
	
	@keyframes bubble1 												{ 0%   { transform: scale(0); } 60%   { transform: scale(0); } 87.5%   { transform: scale(1.1); } 
	100%   { transform: scale(1); } }
		
	#body .br-ot-wrapper.ie9orlower .br-item.standby .svgMask-2			{ opacity:0; }
	#body .br-ot-wrapper.ie9orlower .br-item.animations .svgMask-2		{ opacity:1; transition: opacity 0.3s ease-out; }	
	
	#body .br-ot-wrapper.others .br-item.standby .svgMask-2			{ opacity:0; transform: translate(-10x, 0px); }
	/* #body .br-ot-wrapper.others .br-item.animations .svgMask-2		{ animation: bubble2 4s 1, bubble2inf 8s infinite 4s;  }	 */
	#body .br-ot-wrapper.others .br-item.animations .svgMask-2		{ animation: bubble2inf 8s infinite 0s;  }	

	
	@keyframes bubble2 										{ 0%   	{ transform: translate(-10px, 0px); opacity:0; } 
															  20% 	{ transform: translate(10px, 1px); 			   }
															  40%	{ transform: translate(-5px, -1px); opacity:1; }
															  60%	{ transform: translate(5px, -0.5px);		   } 
															  80%	{ transform: translate(-2.5px, 0.5px); 		   } 
															  100%	{ transform: translate(0px, 0px); 	           } 
															 }	
															 
	@keyframes bubble2inf									{ 0%   	{ transform: translate(0px, 0px);			   } 
															  20% 	{ transform: translate(8px, 0px); 		       }
															  40%	{ transform: translate(-8px, 0px); 		       }
															  60%	{ transform: translate(8px, -0.5px);		   } 
															  80%	{ transform: translate(-8px, 0.5px); 		   } 
															  100%	{ transform: translate(0px, 0px); 	 		   } 
															 }	
	
	
	/* hidden */
	#body .br-ot-wrapper.ie9orlower .br-item.hidden .svgMask-2		{ opacity:0; bottom: -100%; transition:  bottom 0.5s, opacity 0.5s;  }
	#body .br-ot-wrapper.ie9orlower .br-item.hidden .animate-title	{ opacity:0; transition: opacity 0.3s ease-out; }

	#body .br-ot-wrapper.others .br-item.hidden .svgMask-2		{ opacity:0; bottom: -100%; transition:  bottom 0.5s, opacity 0.5s;  }
	#body .br-ot-wrapper.others .br-item.hidden .animate-title	{ opacity:0; transform: translate(-400px , 400px); transition: opacity 0.3s ease-out, transform 0s ease-out 0.3s; }
	
	/* show */
	#body .br-ot-wrapper .ot-bg .ot-bg-img.show					{ opacity:1; }
	
	#body .br-ot-wrapper.ie9orlower .br-item.show .svgMask-2			{ opacity:1; transition: opacity 0.5s; } 
	#body .br-ot-wrapper.ie9orlower .br-item.show .animate-title		{ opacity:1; transition: opacity 0.3s ease-out 0.2s; }
	
	#body .br-ot-wrapper.others .br-item.show .svgMask-2			{ opacity:1; transition:  bottom 0.5s ease-out 0.5s, opacity 0.5s; animation: bubble2inf 8s infinite ease-in-out 0.8s;  } 
	#body .br-ot-wrapper.others .br-item.show .animate-title		{ opacity:1; transform: translate(0px , 0px); transition: opacity 0.3s ease-out 0.2s, transform 0.3s ease-out 0.4s; }
	
	
	@media only screen and (max-width: 768px) {
		#body .br-ot-wrapper.others .svgMask-2 {
			bottom:35px;
			right:30px;
		}
		#body .br-item .animate-title {
			bottom: 0px;
			width: 65%;
			left: 0%;
		}
		
		#body .shop-list .shop-list-item img {
			max-width:200px;
			max-height:60px;
		}
		
		#body .shop-list {
			padding:20px 0px;
		}
		#body .br-item .inner-wrapper {
			padding: 0 20px;
			width:calc(100% - 40px);
		}
	}