@charset "UTF-8";

.v-jr-flow {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1215;
}
.v-jr-flow.v-index-flow{
  margin-top: -150px;
}
.v-jr-flow .gift-box {
	width: 194px;
	height: 85px;
	position: absolute;
	top: 50%;
	right: -1px;
	margin-top: 162px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}
.v-jr-flow .gift-box.show{
  display: block;
}

@media (max-width: 1601px){
.v-jr-flow {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1215;
}
.v-jr-flow.v-index-flow{
  margin-top: -150px;
}
.v-jr-flow .gift-box {
	width: 150px;
	height: 85px;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: 210px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}
.v-jr-flow .gift-box.show{
  display: block;
}

}

/*	↓↓↓↓	ipad 橫向 w1024 ↓↓↓↓	 */
@media (max-width: 1600px) and (min-width: 1024px) {
.v-jr-flow .gift-box {
	width: 140px;
	height: 85px;
	position: absolute;
	top: 50%;
	right: -2px;
	margin-top: 229px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}	
}

/*	↓↓↓↓	ipad 直向 w768 ↓↓↓↓	 */
@media (max-width:1023px) and (min-width: 768px) {
.v-jr-flow .gift-box {
	width: 140px;
	height: 85px;
	position: absolute;
	top: 50%;
	right: -1px;
	margin-top: -5px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}	
	
}

/* ↓↓↓↓ 手機尺寸, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (max-width:767px) and (min-width: 319px) {
.v-jr-flow .gift-box {
	width: 110px;
	height: 85px;
	position: absolute;
	top: 50%;
	right: -4px;
	margin-top: 11px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}	
}

/* ↓↓↓↓ 手機尺寸, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (max-width:320px) and (min-width: 300px) {
.v-jr-flow .gift-box {
	width: 92px;
	height: 70px;
	position: absolute;
	top: 50%;
	right: 0px;
	margin-top: 15px;
	cursor: pointer;
	-o-transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-background-size: contain;
}	
}