@charset "utf-8";
/* CSS Document */
/*------------------------------------
            $Banner
------------------------------------*/
.Bonusbanner{ 
	background: lightgray; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 28vw; width: 100%; 
	background-image: url(../images/Bonus.jpg);
	margin-bottom: 1%;
}


	.banner > .row{ height: 100%; }
	.banner-info {
	float: left;
	position: absolute;
	top: 43%;
	left: 29.5%;
	width: 800px;
	    /*padding-right: 40%;*/
	}

.banner{ 
	background:#0159a0; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position:  center;
    position: relative;
	height: 28vw; 
	background-image: url(../images/Main-GarryPye.jpg);
}


	.banner > .row{ height: 100%; }
	.banner-info {
	float: left;
	position: absolute;
	top: 43%;
	left: 29.5%;
	width: 800px;
	    /*padding-right: 40%;*/
	}
	
/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

		
		
		.banner .playbutton{
	    position: absolute;
	    right: 24%;
	    top: 54%;
		width:7vw;
		height:7vw;
			}
			
		.banner .Bonus{
	position: absolute;
	right: 10%;
	top: 17%;
	width:20vw;
	height:380px;
			}
	
	
	 .banner-info .banner-button{
		    font-size: calc( 20.4px + 0.5vw); /*24-16*/
		    border: none;
		    background-color: #ff9f00;
		    color: #fff;
		    padding-top: 10px;
    		padding-bottom: 10px;
		    padding-right: 30px;
		    padding-left: 30px;
		    min-height: 64px;
		}
		.banner-info .banner-button:focus{ outline: none; }
		.banner-info .banner-button:hover{ background-color: #fff; color: #666666; }
		.banner-info .banner-button:hover .icon{ fill: #666666; }
		.ct .banner-info .banner-button:hover{ background-color: #cccccc; }
	
	
	.MainPrice{
	position:absolute;
	right: 8%;
	bottom: 8%;
	width:14vw;
	min-width: 150px;
	height:10vw;
	}

	@media screen and ( max-width: 1000px ) {
		.MainPrice {
			bottom:15%;
		}

	}
	@media screen and ( max-width: 768px ) {
		.MainPrice {
			bottom:25%;
		}

	}
	@media screen and ( max-width: 480px ) {
		.MainPrice {
			bottom:43%;
		}

	}
	
	.MainPrice .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
	.MainPrice .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
		
	
	.number {	
	 list-style-type:none;
	 padding-left:60px;
	 font-weight:500;
	 line-height:1.2;
	 font-size: calc( 16px + 0.5vw); /*24-16*/
}



	.number span{
	font-style:italic; 
	font-size: calc( 32px + 0.5vw);
	font-weight:bold;
}

		
/*------------------------------------
            $PACK ITEM
------------------------------------*/
.Pack{ 
	 padding:0px;}
.PackThumb a{
	}
.PackThumb :hover{
	 fill:#282828;}

.item {	
	 list-style-type:none;
	 list-style-image:url(../images/check.png);background-repeat:no-repeat;
	 padding-left:60px;
	 font-size: calc( 14.4px + 0.5vw);
	 /*24-16*/
}
.item span{
	font-style:italic; 
	font-size: calc( 16.4px + 0.5vw);
	font-weight:bold;
}


.item2 span{
	font-style:italic; 
	font-size: calc( 16.4px + 0.5vw);
	font-weight:bold;
}

.PackPrice{
	
	}
	
.PackPrice .Price {
	font-size: calc( 20px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
.PackPrice .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
.btn-lg{
	font-size: calc( 12px + 0.5vw);
	background-color:#0159a0; border:none; border-radius:0; color:#ffffff; width:90%;
}
.btn-lg:hover{
	background-color:#ffffff;
}

.btn-lg2{
	font-size: calc( 12px + 0.5vw);
	background-color:#005aa0; border:none; border-radius:0; color:#ffffff; width:90%;
}

.btn-lg2:hover{
	background-color:#00e1ff; 
}

.hover {position:relative;}

.hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/
}

/*------------------------------------
            $Bonus
------------------------------------*/
.bonus{ 
	background: lightgray; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 52vw; 
	background-image: url(../images/Bonus_BG.jpg);
}


	.bonus > .row{ height: 100%; }
	.bonus-info {
		float: right;
	    position: absolute;
	    top: 23%;
	    right: 27%;
		font-size: calc( 18px + 0.5vw); /*24-16*/
	    /*padding-right: 40%;*/
	}
	
/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

		
	 .bonus-info .banner-button{
		    font-size: calc( 14.4px + 0.5vw); /*24-16*/
		    border: none;
		    background-color: #ff9f00;
		    color: #fff;
		    padding-top: 10px;
    		padding-bottom: 10px;
		    padding-right: 30px;
		    padding-left: 30px;
		    min-height: 64px;
		}
		.bonus-info .bonus-button:focus{ outline: none; }
		.bonus-info .bonus-button:hover{ background-color: #fff; color: #666666; }
		.bonus-info .bonus-button:hover .icon{ fill: #666666; }
		.ct .bonus-info .bonus-button:hover{ background-color: #cccccc; }
		
		
	
	
	
	.icon-info {
		float: left;
	    position: absolute;
	    bottom: 18%;
	    left: 6.5%;
		font-size: calc( 18px + 0.5vw); /*24-16*/
	    /*padding-right: 40%;*/
	}
	
	
	.Index{
	position:absolute;
	right: 11%;
	top: 23%;
	width:14vw;
	height:10vw;
	}
	
	.Index .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
	.Index .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
	
	.Index2{
	position:absolute;
	right: 13.5%;
	bottom: -5%;
	width:14vw;
	height:10vw;
	}
	
	.Index2 .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
	.Index2 .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
	
	.Exclusive{
	background-color:#e8f6ff;
	text-align:center;
	position:absolute;
	left: 5%;
	top: 1%;
	width:15vw;
	border:1px solid #282828;
	font-size: calc( 18px + 0.275vw);
	padding:10px;}


.spec{
	background-color:#ffffff;margin:1%; padding:0;
}
.spec h3{ 
	display:block; width:100%;
	font-size: calc( 22px + 0.5vw);
	background-color:#00e1ff;
	color:#ffffff;
	text-align:center;
	line-height:1;
	padding: 5%;
	}
.spec p{
font-size: calc( 12px + 0.5vw); /*24-16*/
color:#666666;
padding:2% 5% 5% 5%;
}

.packname{
	font-size: calc( 22px + 0.5vw);
	color: #005aa0;
	text-transform: uppercase;
	font-weight: bold;
}
.BundleName{
	font-size: calc( 14px + 0.5vw);
	color: #005aa0;
	font-weight: bold;
	line-height: 2;
}

.BonusTitle{
	font-size: calc( 20px + 1.5vw);
	font-weight: bold;
	color: #ffa100;
	padding-top:2%;
}
.BonusSubTitle{
	color: #ffffff;
	font-weight: bold;
	font-size: calc( 14px + 1vw);
	line-height: 2;
}

.Title2{
	font-weight: bold; color: #000;
	font-size: calc( 28px + 0.75vw);
}